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

使用方法:

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

使用yarn命令也是可以的

然后配置項目根目錄的.bablerc文件:

{

? "plugins": [

? ? ["module-resolver", {

? ? ? "root": ["./"],

? ? ? "alias": {

? ? ? ? "P":"./app/p"

? ? ? }

? ? }]

? ]

}

示例

因為.babelrc文件的路徑在項目根, 我們指定配置module-resolver的root為”./”, 因此我們在使用類似import X from ‘path’導入模塊的使用可以不指定../../這種相對路徑, 默認以項目根為模塊的搜索路徑.也可以使用別名，而不是在項目中使用相對路徑。下面舉個簡單的例子：

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

import Mp from 'P/MyPropTypes'

import MyUtilFn from 'utils/MyUtilFn';

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

MyPropTypes這個文件處于根目錄下的app/p文件夾下.

可以看出,這樣的寫法大大加快了開發(fā)效率.

選項

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

alias：別名的配置。也可以別名node_modules依賴關系，而不僅僅是本地文件。

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

cwd：默認情況下，工作目錄是用于解析器的工作目錄，但是您可以覆蓋您的項目。

自定義值babelrc將使插件根據(jù)要解析的文件查找最接近的babelrc配置。

自定義值packagejson將使插件查找最接近package.json的文件解析。

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

resolvePath(sourcePath, currentFile, opts)：為文件中的每個路徑調(diào)用的函數(shù)。默認情況下，模塊解析器使用一個內(nèi)部函數(shù)，如下所示：import { resolvePath } from 'babel-plugin-module-resolver'。該opts參數(shù)是通過babel配置通過選擇對象。

在ReactNative中使用

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

{

? "plugins": [

? ? [

? ? ? "module-resolver",

? ? ? {

? ? ? ? "root": ["./src"],

? ? ? ? "extensions": [".js", ".ios.js", ".android.js"]

? ? ? }

? ? ]

? ]

}