跳至主要内容

Metro

React Native 使用 Metro 构建您的 JavaScript 代码和资源。

配置 Metro​

Metro 的配置选项可以在您项目的 metro.config.js 文件中自定义。该文件可以导出以下两种类型：

  • 一个对象（推荐），它将合并到 Metro 的内部配置默认值之上。
  • 一个函数，它将使用 Metro 的内部配置默认值进行调用，并应返回一个最终的配置对象。
提示

有关所有可用配置选项的文档，请参阅 Metro 网站上的 配置 Metro。

在 React Native 中，您的 Metro 配置应扩展 @react-native/metro-config 或 @expo/metro-config。这些包包含构建和运行 React Native 应用程序所需的必要默认值。

以下是 React Native 模板项目中的默认 metro.config.js 文件

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://metrobundler.dev/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

您希望自定义的 Metro 选项可以在 config 对象中进行。

高级：使用配置函数​

导出配置函数表示您选择自行管理最终配置 - Metro 不会应用任何内部默认值。当需要从 Metro 读取基本默认配置对象或动态设置选项时，此模式很有用。

信息

从 @react-native/metro-config 0.72.1 开始，不再需要使用配置函数来访问完整的默认配置。请参阅下面的“提示”部分。

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

module.exports = function (baseConfig) {
  const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname));
  const {resolver: {assetExts, sourceExts}} = defaultConfig;

  return mergeConfig(
    defaultConfig,
    {
      resolver: {
        assetExts: assetExts.filter(ext => ext !== 'svg'),
        sourceExts: [...sourceExts, 'svg'],
      },
    },
  );
};
提示

使用配置函数适用于高级用例。例如，对于自定义 sourceExts，比上述方法更简单的方法是从 @react-native/metro-config 读取这些默认值。

替代方案

const defaultConfig = getDefaultConfig(__dirname);

const config = {
  resolver: {
    sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

但是！，我们建议在覆盖这些配置值时复制并编辑 - 将真相来源放在您的配置文件中。

✅ 推荐

const config = {
  resolver: {
    sourceExts: ['js', 'ts', 'tsx', 'svg'],
  },
};

了解有关 Metro 的更多信息​