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 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 开始，不再需要使用配置函数来访问完整的默认配置。请参阅下面的“提示”部分。
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'],
},
};