1

我想设置一个 react-native expo（空白打字稿模板）项目monorepo yarn workspaces。我对谷歌的研究指向我使用这个库expo-yarn-workspaces。在他们网站上的教程的一个步骤中，提到您必须“创建” ametro.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使用自定义配置（如上）进一步自定义文件？

4

1 回答 1

2

您可以将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 < v40 的用例：

// 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'],
    }
  };
})();
于 2021-01-06T09:22:48.117 回答