React Native 如何在metro.config中添加多个babelTransformerPath

vuktfyat  于 2023-03-31  发布在  React
关注(0)|答案(2)|浏览(168)

我需要在metro.config中使用多个babelTransformerPath用于react本地应用程序。
react-native-svg-transformer用于SVG,react-native-obfuscating-transformer用于混淆。
简体中文(zh_cn)
简体中文(zh_cn)

yruzcnhs

yruzcnhs1#

我已经用mergeConfig(configA, configB)解决了这个问题。
metro.config.js的外观

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

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

  let config1 = {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };

  let config2 = {
    transformer: {
      babelTransformerPath: require.resolve("./transformer"), // react-native-obfuscating-transformer
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
  };

  return mergeConfig(config1,config2);
  
})();

感谢Metro Docs

ybzsozfc

ybzsozfc2#

方案一:

我们可以检查文件扩展名是否为svg如果是svg则可以使用svg否则可以使用react-native-obfuscating-transformer

地铁配置js

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

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

  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
      babelTransformerPath: require.resolve('./transformer'),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

transformer.js

const typescriptTransformer = require('react-native-typescript-transformer');
const obfuscatingTransformer = require('react-native-obfuscating-transformer-fix');
const svgTransformer = require('react-native-svg-transformer');

const filter = (filename) => {
  return filename.startsWith('src');
};

const obfuscating = obfuscatingTransformer({
  upstreamTransformer: typescriptTransformer,
  obfuscatorOptions: {
    compact: true,
    controlFlowFlattening: false,
    deadCodeInjection: false,
    debugProtection: false,
    debugProtectionInterval: false,
    disableConsoleOutput: true,
    identifierNamesGenerator: 'hexadecimal',
    log: false,
    renameGlobals: false,
    rotateStringArray: true,
    selfDefending: true,
    shuffleStringArray: true,
    splitStrings: false,
    stringArray: true,
    stringArrayEncoding: ['base64'],
    stringArrayThreshold: 0.75,
    unicodeEscapeSequence: false,
  },
  emitObfuscatedFiles: false,
  enableInDevelopment: true,
  filter: filter,
  trace: true,
});

module.exports.transform = function ({ src, filename, options }) {
  if (filename.endsWith('.svg')) {
    return svgTransformer.transform({ src, filename, options });
  } else {
    return obfuscating.transform({ src, filename, options });
  }
};

方案二:

我们可以通过合并两个配置来修复它,如mergeConfig(config1, config2)

地铁配置js

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

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

  const config1 = {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };

  const config2 = {
    transformer: {
      babelTransformerPath: require.resolve('./transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
  };

  return mergeConfig(config1, config2);
})();

相关问题