1. 什么是Metro：

把项目中的几十上百个JS文件和node_modules依赖，打包成一个单独的JavaScript文件（bundle）,这个过程包括解析模块依赖关系、转换代码格式，最终生成可在设备上加载执行的bundle文件

Metro在React Native中是JavaScript打包工具，Metro是React Native的‌核心构建工具‌，主要负责将你的JavaScript代码和资源文件打包成移动应用可以运行的格式。‌Metro是React Native的JavaScript打包器‌，主要负责：

• 将React Native应用中的JavaScript代码和资源文件打包成一个可在移动设备上运行的bundle

• 提供热重载功能，让开发者能够实时看到代码修改效果

• 通过桥接机制连接JavaScript与原生平台代码
  ‌
  Metro的工作流程‌：

• 扫描项目中的JavaScript文件

• 解析模块依赖关系

• 将代码转换并打包为单个文件

• 在应用运行时通过"桥"与原生UI线程通信

2. 配置 Metro：

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

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

• 一个对象(推荐),将与 Metro 的内部配置默认值合并。
• 一个函数,该函数将使用 Metro 的内部配置默认值被调用,并返回最终的配置对象。

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

下面是 React Native 模板项目中默认的metro.config.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);

---

3. 高级:使用配置函数：

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

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

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

替代方案:

const defaultConfig = getDefaultConfig(__dirname);

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

module.exports = mergeConfig(defaultConfig, config);

但是!,我们建议在覆盖这些配置值时复制并编辑 - 将真实来源放在你的配置文件中。

✅ 推荐

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

Metro的配置优化，通过配置Metro可以实现代码分割、体积优化等高级功能。例如启用inlineRequires: true可以减少21%的初始bundle体积，还可以通过blockList配置排除重复依赖。

‌建议‌：如果你在使用React Native开发时遇到启动缓慢或打包体积过大的问题，可以尝试优化Metro配置，比如启用实验性导入支持和模块路径优先级设置。

---

4. 配置 Metro 修改 OpenHarmony 的适配代码：

打开 HarmonyRNShop\metro.config.js，并添加 OpenHarmony 的适配代码，修改完成后的文件内容如下：

const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');

/**
* @type {import("metro-config").ConfigT}
*/
const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
  reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
}), config);

---

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。