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文件夹下.
可以看出,这样的写法大大加快了开发效率.
选项
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"]
}
]
]
}