带博览纱线的世博会单体展览馆.工作区:如何自定义metro.config.js文件

Question

我想建立一个反应-本地博览(空白类型记录模板)项目与monorepo yarn workspaces。我对谷歌的研究表明我使用了这个库expo-yarn-workspaces。在本教程的一个步骤中，您必须“创建”一个metro.config.js并添加以下几行：

const { createMetroConfiguration } = require('expo-yarn-workspaces');
module.exports = createMetroConfiguration(__dirname);

问题是，通常，在我以前的反应性本地博览会项目中，我经常在我的metro.config.js中添加一些自定义配置，以便将我的应用程序导入svg文件作为react components。这是我的自定义配置：

// metro.config.js

const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

我的问题是:如何使用自定义配置(如上面所述)进一步自定义metro.config.js文件？

Answer 1

您可以将和组合在一起(如果expo版本为v40.0.0或更高版本的话，也可以将组合在一起)来配置react本机包程序。要点是，来自expo纱线工作区及其解析器的配置不会导出sourceExts，您应该使用metro中的另一个配置。

世博SDK v40.0.0或更高版本：

// metro.config.js
const { createMetroConfiguration } = require('expo-yarn-workspaces');
const { getDefaultConfig } = require('@expo/metro-config');

const configuration = createMetroConfiguration(__dirname);

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

  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      ...configuration.resolver,
      assetExts: configuration.resolver.assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
      // NOTE: using native entrypoint because bug in metro https://github.com/facebook/metro/issues/485
      resolverMainFields: ['native', 'module', 'browser', 'main'],
    }
  };
})();

使用

// metro.config.js
const { createMetroConfiguration } = require('expo-yarn-workspaces');
const { getDefaultConfig } = require("metro-config");

const configuration = createMetroConfiguration(__dirname);

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

  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      ...configuration.resolver,
      assetExts: configuration.resolver.assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
      // NOTE: using native entrypoint because bug in metro https://github.com/facebook/metro/issues/485
      resolverMainFields: ['native', 'module', 'browser', 'main'],
    }
  };
})();