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'],
},
};