Как добавить несколько babelTransformerPath в metro.config

#javascript #reactjs #react-native

Вопрос:

Мне нужно использовать несколько babelTransformerPath в metro.config для собственного приложения react.

react-native-svg-transformer для SVG и react-native-obfuscating-transformer для запутывания.

React-Родной — 0.64.0

Реагировать — 17.0.1

Ответ №1:

Я решил эту проблему с помощью 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