Skip to main content

Metro

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

¥React Native uses Metro to build your JavaScript code and assets.

配置 Metro​

¥Configuring Metro

Metro 的配置选项可以在项目的 metro.config.js 文件中自定义。这可以导出：

¥Configuration options for Metro can be customized in your project's metro.config.js file. This can export either:

  • 将合并到 Metro 内部配置默认值之上的对象（推荐）。

    ¥An object (recommended) that will be merged on top of Metro's internal config defaults.

  • 一个功能 将使用 Metro 的内部配置默认值进行调用，并应返回最终的配置对象。

    ¥A function that will be called with Metro's internal config defaults and should return a final config object.

提示

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

¥Please see Configuring Metro on the Metro website for documentation on all available config options.

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

¥In React Native, your Metro config should extend either @react-native/metro-config or @expo/metro-config. These packages contain essential defaults necessary to build and run React Native apps.

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

¥Below is the default metro.config.js file in a React Native template project:

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 options you wish to customize can be done so within the config object.

高级：使用配置函数​

¥Advanced: Using a config function

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

¥Exporting a config function is an opt-in to managing the final config yourself — Metro will not apply any internal defaults. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically.

信息

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

¥From @react-native/metro-config 0.72.1, it is no longer necessary to use a config function to access the complete default config. See the Tip section below.

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

¥Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising sourceExts, would be to read these defaults from @react-native/metro-config.

选择

¥Alternative

const defaultConfig = getDefaultConfig(__dirname);

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

module.exports = mergeConfig(defaultConfig, config);

但是！，我们建议在覆盖这些配置值时进行复制和编辑 - 将事实来源放入你的配置文件中。

¥However!, we recommend copying and editing when overriding these config values — placing the source of truth in your config file.

✅ 受到推崇的

¥✅ Recommended

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

了解更多关于 Metro 的信息​

¥Learn more about Metro