react-native 相對項目路徑導入組件 ___ babel-plugin-module-resolver

babel-plugin-module-resolver 是一個Babel模塊解析插件, 在.babelrc中能夠配置模塊的導入搜索路徑. 爲模塊添加一個新的解析器。這個插件容許你添加新的「根」目錄，這些目錄包含你的模塊。它還容許您設置一個自定義別名目錄，具體的文件，甚至其餘NPM模塊。

使用指南

咱們使用的目標要達到如下的使用效果

// 一般
import Mp from '../../p/MyPropTypes';

import MyUtilFn from '../../../../utils/MyUtilFn';

// 使用了 babel-plugin-module-resolver 以後
import Mp from 'P/MyPropTypes'

import MyUtilFn from 'utils/MyUtilFn';

組件安裝

npm 方式

npm install babel-plugin-module-resolver --save-dev

yarn 方式

yarn add babel-plugin-module-resolver --dev

配置

項目根目錄的.bablerc文件

{
  "plugins": [
    ["module-resolver", {
      "root": ["./"],
      "alias": {
         "P":"./app/p"
      }
    }]
  ]
}

• 由於.babelrc文件的路徑在項目根, 咱們指定配置module-resolver的root爲」./」.
• 默認以項目根爲模塊的搜索路徑.
• 也能夠使用別名，而不是在項目中使用相對路徑。

選項

root：一個字符串或根目錄的數組。指定路徑或全局路徑（例如./src/**/components）

alias：別名的配置。也能夠別名node_modules依賴關係，而不單單是本地文件。

extensions：解析器中使用的擴展數組。覆蓋默認擴展名（['.js', '.jsx', '.es', '.es6', '.mjs']）。

cwd：默認狀況下，工做目錄是用於解析器的工做目錄，可是您能夠覆蓋您的項目。
自定義值babelrc將使插件根據要解析的文件查找最接近的babelrc配置。
自定義值packagejson將使插件查找最接近package.json的文件解析。

transformFunctions：將會變換其第一個參數的函數和方法的數組。默認狀況下，這些方法是：require，require.resolve，System.import，jest.genMockFromModule，jest.mock，jest.unmock，jest.doMock，jest.dontMock。

resolvePath(sourcePath, currentFile, opts)：爲文件中的每一個路徑調用的函數。默認狀況下，模塊解析器使用一個內部函數，以下所示：import { resolvePath } from 'babel-plugin-module-resolver'。該opts參數是經過babel配置經過選擇對象。

在ReactNative中使用

讓packager正確解決各平臺的模塊，你必須添加 ios.jsand android.js擴展：

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "extensions": [".js", ".ios.js", ".android.js"]
      }
    ]
  ]
}