React(JavaScript 库)React.js 的一个问题:具有多个 babelTransformerPath 的 Metro 配置

IT技术 javascript reactjs react-native facebook-javascript-sdk metro-bundler
2022-07-06 02:16:21

我在我的应用程序中使用SVG文件react-native并且与react-native-svg-transformer. 但是现在我需要实现dynatrace,我尝试mergeConfigmetro config文件上使用,但是,svg如果我使用这两种配置,则停止工作。

这是我的metro config文件。欢迎所有帮助。

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

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

const configDynatrace = {
    transformer: {
        babelTransformerPath: require.resolve('@dynatrace/react-native-plugin/lib/dynatrace-transformer')
    },
    reporter: require("@dynatrace/react-native-plugin/lib/dynatrace-reporter")
};

module.exports = mergeConfig(configDynatrace, configSvg);
1个回答

似乎你不能像上面那样合并它们 -SVG否则它会破坏支持。

您需要执行以下操作:

dynatrace.config.js

react: {
    upstreamTransformer: 'react-native-svg-transformer',
}

metro.config

const configDynatrace = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig()
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
      babelTransformerPath: require.resolve('@dynatrace/react-native-plugin/lib/dynatrace-transformer')
    },
    reporter: require("@dynatrace/react-native-plugin/lib/dynatrace-reporter"),
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  }
})();

module.exports = configDynatrace