React Native中如何转译node_modules目录下的ES6代码？

当然可以给特定模块开白名单转译啦！React Native默认确实会跳过node_modules目录的编译（毕竟打包整个node_modules太慢了），但遇到依赖的模块用了箭头函数这类未转译的ES6特性时，就得手动配置让Babel处理它们。下面是几种实用的方案，根据你的RN版本选择就行：

方案一：配置Metro打包器（推荐，适配RN 0.59+） #

Metro是React Native的核心打包工具，修改它的配置是最直接有效的方式。找到项目根目录的metro.config.js（没有的话直接新建一个），通过transformIgnorePatterns来指定不需要忽略的模块（也就是我们要转译的白名单）：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const customConfig = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
    // 用正则负向预查，意思是：除了括号里的模块，其他node_modules内容都跳过转译
    transformIgnorePatterns: [
      'node_modules/(?!(需要转译的模块名1|需要转译的模块名2)/)',
    ],
  },
});

比如你要转译lodash-es和my-custom-module，就把括号里改成lodash-es|my-custom-module就行。

方案二：通过Babel配置文件指定 #

如果你的项目还在使用.babelrc或者babel.config.js，可以直接在配置里给目标模块单独设置转译规则：

针对babel.config.js（RN 0.59+推荐使用） #

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  // 给指定模块单独配置转译规则
  overrides: [
    {
      test: /node_modules\/需要转译的模块名\/.*/,
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: ['@babel/plugin-transform-arrow-functions', '@babel/plugin-transform-class-properties']
    }
  ]
};

针对旧版.babelrc #

{
  "presets": ["react-native"],
  "only": [
    "./src/**/*",
    "./node_modules/需要转译的模块名/**/*"
  ]
}

不过要注意，.babelrc的only选项有时候会被Metro的默认配置覆盖，所以优先推荐方案一。

最后必做：清除缓存 #

配置完之后，一定要清除RN的缓存再运行项目，不然旧的缓存会导致配置不生效：

npx react-native start --reset-cache

内容的提问来源于stack exchange，提问作者allforabit