RN的相對(duì)路徑地獄

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

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

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

作為前端開發(fā)時(shí)熟悉的webpack.config.js，在RN的腳手架中并沒有看到，但是要知道，webpack.config.js里用來(lái)自定義import路徑的resolve.alias最終目的也是讓babel在翻譯代碼時(shí)，能夠找到正確的路徑。所以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)的情況下，是沒有這個(gè)文件的，需要自己新建。

• 把相對(duì)路徑都改成自定義引用

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

• 重啟

yarn start

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

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

解決自定義引用路徑導(dǎo)致的eslint報(bào)錯(cuò)問(wèn)題

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

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

如果你使用了airbnb或者單獨(dú)引用了eslint-plugin-import，那么當(dāng)你利用babel-plugin-module-resolver成功解析了自定義引用路徑的同時(shí)，eslint就會(huì)因?yàn)闊o(wú)法找到這些路徑而報(bào)錯(cuò)。因?yàn)樯婕暗秸麄€(gè)項(xiàng)目的所有文件，不可能在文件里簡(jiǎn)單的ignore某個(gè)rule來(lái)消除錯(cuò)誤，而是需要在.eslintrc.js里覆蓋eslint-plugin-import的import/no-unresolved這條rule才行。

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

至此，解決了自定義引用路徑問(wèn)題，同時(shí)避免了eslint的報(bào)錯(cuò)。

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

最新評(píng)論