使用expo-yarn-workspaces的expo monorepo：如何自定义metro.config.js文件

问题描述

我想使用monorepo yarn workspaces设置一个本机expo（空白打字稿模板）项目。我对google的研究指出，我要使用此库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文件？

解决方法

您可以将 expo-yarn-workspaces 和 metro-config（或 @expo/metro-config，如果您的 expo SDK 版本为 v40.0.0 或更高版本）组合在一起来配置 React Native 打包程序。关键是 expo-yarn-workspaces 中的配置及其解析器不会导出 sourceExts，您应该使用 Metro-config 中的另一个配置。

Expo 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'],}
  };
})();

您使用 Expo SDK

// 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")
    },}
  };
})();