RN的相對路徑地獄

我剛接觸RN時，就發(fā)現(xiàn)所有的demo中給出來的路徑都是相對路徑，我自己的練習(xí)項目中想改成自定義的絕對路徑，但是發(fā)現(xiàn)并沒有我做前端時熟悉的webpack.config.js,所以也就不知道該怎么改了。伴隨著RN的學(xué)習(xí)和開發(fā)練習(xí)，我的代碼也變得越來越多，越來越復(fù)雜，我逐漸發(fā)現(xiàn)RN的相對路徑越來越麻煩，比如我把某個文件移動到另一個不同深度的文件夾中，那么就需要把所有引用這個文件的地方都改一遍。請看下面這些例子，這些小點點，晃得我眼暈。

import { deviceInfo } from '../../utilities/device'
...
import { API, DEV } from '../../../config/api'
...
import { Headers } from '../../widgets/nav'
...
import { basic } from '../../styles/theme'
...

RN的自定義路徑需要的依賴

作為前端開發(fā)時熟悉的webpack.config.js，在RN的腳手架中并沒有看到，但是要知道，webpack.config.js里用來自定義import路徑的resolve.alias最終目的也是讓babel在翻譯代碼時，能夠找到正確的路徑。所以RN里想用自定義的引用路徑，還得靠babel的配置才行。

• 安裝依賴babel-plugin-module-resolver

yarn add babel-plugin-module-resolver -D

• 配置babel.config.js

plugins: [
    [
      require.resolve('babel-plugin-module-resolver'),
      {
        extensions: ['.js', '.jsx'],
        root: ['.'],
        alias: {
          utilities: './src/utilities',
          config: './src/config',          
          widgets: './src/widgets',
          styles: './src/styles'
        }
      },
    ],
  ]

• 配置jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "utilities": ["./src/utilities/*"],
      "config": ["./src/config/*"],
      "widgets": ["./src/widgets/*"],
      "styles": ["./src/styles/*"],
    }
  }
}

RN腳手架默認(rèn)的情況下，是沒有這個文件的，需要自己新建。

• 把相對路徑都改成自定義引用

import { deviceInfo } from 'utilities/device'
...
import { API, DEV } from 'config/api'
...
import { Headers } from 'widgets/nav'
...
import { basic } from 'styles/theme'
...

• 重啟

yarn start

此時我發(fā)現(xiàn)，自定義的路徑并沒有起作用，Metro報錯說找不到路徑。因為我的所有React組件的定義，都是以jsx為文件后綴的。我在項目里使用了eslint-plugin-react這個eslint插件，它的推薦規(guī)則就是要React的組件的文件后綴為jsx。當(dāng)我把文件后綴改成js后，代碼就能正常運行了。

我覺得文件后綴為jsx的情況下，jsconfig.js也能通過某種方式起作用，可惜我現(xiàn)在還不知道。

解決自定義引用路徑導(dǎo)致的eslint報錯問題

如果你使用了eslint-plugin-react，那么當(dāng)你用js作為React組件的文件后綴時，eslint會報錯。為了解決自定義引用路徑問題，我只能犧牲掉這條eslint的rule。在.eslintrc.js加上這一條rule，就可以解決掉它。

rules:[
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx']}]
]

如果你使用了airbnb或者單獨引用了eslint-plugin-import，那么當(dāng)你利用babel-plugin-module-resolver成功解析了自定義引用路徑的同時，eslint就會因為無法找到這些路徑而報錯。因為涉及到整個項目的所有文件，不可能在文件里簡單的ignore某個rule來消除錯誤，而是需要在.eslintrc.js里覆蓋eslint-plugin-import的import/no-unresolved這條rule才行。

rules:[
    'import/no-unresolved': [2, { ignore: ['^utilities', '^config', '^widgets', '^styles']}]
]

至此，解決了自定義引用路徑問題，同時避免了eslint的報錯。

以上就是詳解React Native中如何使用自定義的引用路徑的詳細(xì)內(nèi)容，更多關(guān)于React Native自定義引用路徑的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論