如何在React Native的metro.config中配置多个babelTransformerPath

React Native的Metro打包器默认仅支持指定单个babelTransformerPath，需要自定义中间包装层合并多个transformer的处理逻辑，具体配置步骤如下：

1. 安装依赖 #

先安装需要用到的两个transformer包：

# npm安装
npm install react-native-svg-transformer react-native-obfuscating-transformer --save-dev

# yarn安装
yarn add react-native-svg-transformer react-native-obfuscating-transformer --dev

2. 创建自定义Transformer包装文件 #

在项目根目录新建custom-transformer.js，用来整合两个transformer的处理逻辑：

// custom-transformer.js
const obfuscatingTransformer = require('react-native-obfuscating-transformer')
const svgTransformer = require('react-native-svg-transformer')

module.exports.transform = function ({ src, filename, options }) {
  // 优先处理SVG格式资源
  if (filename.endsWith('.svg')) {
    return svgTransformer.transform({ src, filename, options })
  }
  // 其余JS/TS业务代码走混淆处理
  return obfuscatingTransformer.transform({ src, filename, options })
}

3. 修改metro.config.js配置 #

适配RN 0.64版本的配置如下：

const { getDefaultConfig } = require('metro-config')

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig()
  return {
    transformer: {
      babelTransformerPath: require.resolve('./custom-transformer.js'),
      // 代码混淆参数配置，可按需调整
      obfuscatorOptions: {
        compact: true,
        controlFlowFlattening: true,
        controlFlowFlatteningThreshold: 0.75,
        numbersToExpressions: true,
        stringArrayShuffle: true,
        splitStrings: true,
        splitStringsChunkLength: 3,
        // 排除不需要混淆的文件
        exclude: [/node_modules/, /__tests__/],
      },
    },
    resolver: {
      // 将svg从资源扩展名中移除，加入源码扩展名让transformer处理
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  }
})()

4. 注意事项 #

• 开发阶段建议关闭混淆功能，可大幅提升编译速度，只需在obfuscatorOptions中添加enabled: false即可
• 如果混淆后出现运行异常，可将报错文件的路径加入exclude数组跳过混淆
• 若项目使用TypeScript，需要把ts、tsx补充到sourceExts数组中

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