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

Question

我想用monorepo yarn workspaces 设置一个 react-native expo（空白打字稿模板）项目。我对谷歌的研究指出我使用这个库expo-yarn-workspaces。在他们网站上的教程的一个步骤中，提到您必须“创建”metro.config.js 并添加以下行：

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

一般来说，在我之前的 react-native expo 项目中，我曾经在我的 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-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")
    },
    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'],
    }
  };
})();