我需要在metro.config中使用多个babelTransformerPath用于react本地应用程序。react-native-svg-transformer用于SVG,react-native-obfuscating-transformer用于混淆。简体中文(zh_cn)简体中文(zh_cn)
babelTransformerPath
react-native-svg-transformer
react-native-obfuscating-transformer
yruzcnhs1#
我已经用mergeConfig(configA, configB)解决了这个问题。metro.config.js的外观
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
ybzsozfc2#
我们可以检查文件扩展名是否为svg如果是svg则可以使用svg否则可以使用react-native-obfuscating-transformer
svg
地铁配置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)
mergeConfig(config1, config2)
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); })();
2条答案
按热度按时间yruzcnhs1#
我已经用
mergeConfig(configA, configB)
解决了这个问题。metro.config.js
的外观感谢Metro Docs
ybzsozfc2#
方案一:
我们可以检查文件扩展名是否为
svg
如果是svg
则可以使用svg
否则可以使用react-native-obfuscating-transformer
地铁配置js
transformer.js
方案二:
我们可以通过合并两个配置来修复它,如
mergeConfig(config1, config2)
地铁配置js