小白3天精通跨平台React Native鸿蒙开发：MutilBundle加载方案实现路由跳转React Native 多 Bundle 打包系统，用于 OpenHarmony 平台的混合应用开发

本文介绍了一个基于React Native和Metro打包器的多Bundle系统，专为OpenHarmony平台设计。系统通过模块ID生成器、基础包配置和业务包配置三个核心组件，实现模块化打包和按需加载。模块ID生成器采用MD5哈希算法确保模块标识的稳定性，基础包配置整合公共模块，业务包配置则针对特定功能实现精细化控制。系统通过智能过滤和缓存机制优化资源打包，支持增量构建，为OpenHarmony

2301_77888392

364人浏览 · 2025-12-02 21:36:21

2301_77888392 · 2025-12-02 21:36:21 发布

这三段代码构成了一个完整的 React Native 多 Bundle 打包系统，专门用于 OpenHarmony 平台的混合应用开发。让我为您详细解析这个系统的架构设计和实现原理。

整体架构概述

这是一个基于 Metro 打包器的模块化构建系统，支持将大型 React Native 应用拆分为多个独立的 Bundle 文件，实现按需加载和资源优化。

系统组成
-‌ 模块ID生成器‌：为每个文件生成唯一的稳定标识符
-‌ ‌基础包配置‌：包含共享的公共模块
-‌ 业务包配置：针对特定功能模块的独立配置

公共moduleId：

const path = require('path');
const fs = require('fs');
const MD5 = require('crypto-js/md5');
const basicModuleIds = require('./map/basicModuleIds.json');
const businessModuleIds = require('./map/businessModuleIds.json');

function getModuleId(projectRootPath, modulePath, bundleName) {
  const pathRelative = modulePath.substr(projectRootPath.length + 1);
  const moduleIds = bundleName === 'basic' ? basicModuleIds : businessModuleIds;
  const moduleId = MD5(pathRelative).toString();
  moduleIds[pathRelative] = moduleId;
  fs.writeFileSync(path.resolve(__dirname, `./map/${bundleName === 'basic' ? 'basicModuleIds' : 'businessModuleIds'}.json`), JSON.stringify(moduleIds));
  return moduleId;
}

function createModuleIdFactoryWrap(projectRootPath, bundleName) {
  return () => {
    return (path) => {
      const pathRelative = path.substr(projectRootPath.length + 1);
      const moduleId = basicModuleIds[pathRelative] || businessModuleIds[pathRelative] || getModuleId(projectRootPath, path, bundleName);
      return moduleId;
    };
  };
}

function postProcessModulesFilterWrap(projectRootPath) {
  // 返回false则不打入bundle中
  return (module) => {
    const modulePath = module.path;
    const pathRelative = modulePath.substr(projectRootPath.length + 1);
    const moduleId = basicModuleIds[pathRelative];
    if (pathRelative.indexOf('__prelude__') >= 0 ||
      pathRelative.indexOf(`node_modules${path.sep}@react-native${path.sep}polyfills`) >= 0 ||
      pathRelative.indexOf(`node_modules${path.sep}metro-runtime${path.sep}src${path.sep}polyfills`) >= 0) {
      return false;
    }
    return !moduleId
  };
}

module.exports = { createModuleIdFactoryWrap, postProcessModulesFilterWrap };

在这里插入图片描述
这个模块是整个打包系统的基石，它通过精密的算法设计实现了模块的稳定标识和智能过滤。在模块ID生成系统中，MD5哈希算法发挥着核心作用。基于模块相对路径生成固定长度的哈希值，这种设计确保了同一文件在不同构建会话中能够获得完全一致的ID，这对于增量构建和缓存机制至关重要。

路径相对化处理是整个流程的第一步，它将绝对路径转换为相对于项目根目录的路径表示。这种转换不仅简化了路径表示，更重要的是为后续的哈希计算提供了统一的输入基准。通过精确的字符串裁剪操作，系统能够准确地提取出模块在项目中的位置信息。

哈希计算阶段采用MD5算法，虽然现代加密领域MD5已不再被认为是安全的，但在这种应用场景下，它的碰撞概率完全满足模块标识的需求。MD5(pathRelative).toString()调用将路径字符串转换为32位的十六进制哈希值，这个值具有足够的唯一性来标识不同的模块。

缓存机制是这个系统的智能化体现。系统维护两个独立的模块ID映射表：basicModuleIds用于基础模块，businessModuleIds用于业务模块。每次生成新的模块ID时，系统都会立即更新对应的JSON映射文件，这种实时持久化策略确保了即使在构建过程中断的情况下，已生成的ID信息也不会丢失。

createModuleIdFactoryWrap函数采用了工厂模式设计，这种三层嵌套的架构允许配置的高度复用和参数的预先绑定。当Metro打包器调用这个工厂函数时，它会返回一个专门用于处理模块路径的函数，这个函数内部实现了智能的ID查找逻辑。

主体文件basic.config.js：

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

const projectRootPath = path.join(__dirname);

const config = {
  serializer: {
    createModuleIdFactory: moduleId.createModuleIdFactoryWrap(
      projectRootPath,
      'basic',
    ),
  },
};

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

在这里插入图片描述

@react-native/metro-config提供了官方的默认配置，这些配置包含了React Native项目运行所需的基本设置。而@react-native-oh/react-native-harmony则提供了鸿蒙平台特有的适配配置。通过mergeConfig函数，系统能够将这些配置与用户自定义设置无缝集成。

在基础包配置中，系统专门为’basic’包名称配置了模块ID工厂函数。这个工厂函数基于项目根路径和包名称参数，为每个模块生成稳定的标识符。这种稳定性对于增量构建和热重载功能至关重要。

项目根路径的动态获取通过path.join(__dirname)实现，这种方法确保了配置在不同环境下的适应性。无论项目部署在哪个目录，系统都能够准确地确定根路径位置。

序列化器配置是Metro打包流程中的关键环节。它负责将模块依赖图转换为可执行的JavaScript代码。createModuleIdFactory参数指定了用于生成模块ID的具体实现逻辑。

页面级flight.config.js：

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

const projectRootPath = path.join(__dirname);

const config = {
  serializer: {
    createModuleIdFactory: moduleId.createModuleIdFactoryWrap(
      projectRootPath,
      'flight',
    ),
    processModuleFilter: moduleId.postProcessModulesFilterWrap(
      projectRootPath,
    ),
  },
};

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