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"]
      }
    ]
  ]
}