跳至主内容
版本：当前版本

Metro

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

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 configuration
 * https://metrobundler.dev/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {};

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

您可以在 config 对象中自定义所需的 Metro 选项。

进阶：使用配置函数​

导出配置函数意味着您需要自行管理最终配置——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 信息​