日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

詳解React?Native中如何使用自定義的引用路徑_React

作者：前百花真君 ? 更新時間： 2022-11-23 編程語言

RN的相對路徑地獄

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

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

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

作為前端開發時熟悉的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腳手架默認的情況下，是沒有這個文件的，需要自己新建。

  • 把相對路徑都改成自定義引用
import { deviceInfo } from 'utilities/device'
...
import { API, DEV } from 'config/api'
...
import { Headers } from 'widgets/nav'
...
import { basic } from 'styles/theme'
...
  • 重啟
yarn start

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

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

解決自定義引用路徑導致的eslint報錯問題

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

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

如果你使用了airbnb或者單獨引用了eslint-plugin-import，那么當你利用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的報錯。

原文鏈接：https://juejin.cn/post/7152855292114386951

欄目分類
最近更新