前言

近期想要给公司的 react-native 项目升级版本，由于新的 react-native 已经弃用了 @providesModule 注释（该注释用来声明一个可以在任何位置以绝对路径导入的模块），我急需找一种替代方案。

于是我找到了 babel-plugin-module-resolver ，这是一个可以将路径进行代理的依赖，虽然不算完美的解决方法，但是我已经找不到更好的、能够无痛替代 @providesModule 的方案了，如果有更好的方案，欢迎留言告知我一下。

使用中正好遇到并解决了使用时配置未生效的问题，官方也没有足够的说明来避坑，值得记录一下。

导入依赖

$ npm i babel-plugin-module-resolver

or

$ yarn add babel-plugin-module-resolver

babel.config.js

在根目录创建 babel.config.js 文件，下方的配置路径都从该文件所在的根目录出发。

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        [
            'module-resolver',
            {
                root: ['./js'], // 配置可以使用下方代理的目录
                alias: {
                    'localRequest': './js/constants/request', 
                },
            },
        ],
    ],
};

这段配置的意思是：在 js 这个目录中的所有文件，可以直接引入 localRequest ，等于是引入 js/constants/request 这个绝对路径，就不用去伺候复杂的相对路径。

import localRequest from '../../../js/constants/request';
import localRequest from '../../constants/request';
...
// 诸如此类的导入都可以使用下方的代替
import localRequest from 'localRequest'

此时的 localRequest 就好似 node_modules下的依赖包一样，但是它确是在项目中可编辑的文件，这也是原来 @providesModule 所做的事。

只要将所有 @providesModule 相关的文件都进行相关配置，就解决了旧版本rn遗留的 @providesModule 问题。

编辑器识别跳转

虽然项目是识别了对应的路径，但是编辑器不一定识别的了，所以我们需要配置一下 jsconfig.json 或者 tsconfig.json 来让编辑器也可以识别，这样我们不会出现我们追溯文件时无法手动跳转的问题。

也很简单，只要将 babel.config.js 文件中的代理配置，加到 jsconfig.json 或者 tsconfig.json 的 paths 配置中就好了

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "localRequest": ["./js/constants/request"]
    }
  }
}

为什么配置未生效

大概率项目因为启动加载过，缓存未清除，在启动时清除一下即可。

$ yarn start --reset-cache

尾言

感觉自己以后的项目，引入该依赖来解决相对路径问题，也不错。

如果觉得文章还不错的话，欢迎点赞收藏哦，有什么错误或者问题也可以留言，感谢~