metro.config.js配置svg与obfuscating-transformer冲突解决方法

mergeConfig不会对babelTransformerPath这类字符串类型的配置项做深度合并，两个转换器都需要修改该字段指向自身入口，合并时后加载的配置会直接覆盖前值，这是配置偶发失效的核心原因。靠mergeConfig无法实现两个转换器共存，必须通过自定义转换器做文件后缀分流。

1. 修改metro.config.js #

移除两个转换器各自的babelTransformerPath配置，统一指向自定义分流转换器，同时保留svg文件的resolver规则：

const { getDefaultConfig, mergeConfig } = require("metro-config");

module.exports = (async () => {
  const defaultConfig = await getDefaultConfig();
  const {
    resolver: { sourceExts, assetExts },
  } = defaultConfig;

  const customConfig = {
    transformer: {
      babelTransformerPath: require.resolve("./custom-transformer.js"),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"],
    },
  };

  return mergeConfig(defaultConfig, customConfig);
})();

2. 编写自定义分流转换器 #

在项目根目录新建custom-transformer.js，修正之前的逻辑错误：非svg分支不能直接返回混淆转换器模块，必须调用其暴露的transform方法执行转换逻辑。

const svgTransformer = require("react-native-svg-transformer");
// 引入混淆转换器
const obfuscatingTransformer = require("react-native-obfuscating-transformer");

// 初始化混淆转换器实例，可按需传入原有混淆配置
const obfuscateInstance = obfuscatingTransformer({
  // 此处填写你原本给react-native-obfuscating-transformer的配置
  // 例如混淆规则、过滤文件列表、上游转换器配置等
  upstreamTransformer: require("metro-react-native-babel-transformer"),
});

module.exports.transform = async ({ src, filename, options }) => {
  // .svg后缀文件交给svg转换器处理
  if (filename.endsWith(".svg")) {
    return svgTransformer.transform({ src, filename, options });
  }
  // 其余所有文件交给混淆转换器处理
  return obfuscateInstance.transform({ src, filename, options });
};

• 原有混淆转换器的所有配置（比如跳过指定文件、混淆等级等）都可以在初始化obfuscateInstance时正常传入，分流逻辑不会破坏原有配置生效。
• 不要在配置中重复声明babelTransformerPath，该字段仅支持指向一个转换器入口，多值必然出现覆盖问题。
• 配置修改完成后必须清空Metro缓存重启服务，否则旧缓存会导致配置不生效，执行以下命令启动：
  npx react-native start --reset-cache
• 如果你使用的是Expo托管项目，自定义转换器的路径配置逻辑一致，仅需要注意对应Expo版本的Metro默认配置获取方式即可。

内容的提问来源于stack exchange，提问作者tecs-x