跳到主要内容
版本：0.80

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 文件：

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

/**
 * Metro 配置
 * 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 开始，不再需要使用配置函数来访问完整的默认配置。请参见下面的 提示 部分。

js
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 读取这些默认值。

替代方案

js
const defaultConfig = getDefaultConfig(__dirname);

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

module.exports = mergeConfig(defaultConfig, config);

不过！, 当覆盖这些配置值时，我们建议复制并编辑——把唯一可信来源放在你的配置文件中。

✅ 推荐

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

了解更多关于 Metro​