Metro使用

根据基础包业务包的不同，添加 --config <path/to/config> 参数对相应入口文件打包。

• 基础包 basic：

  将需要的第三方依赖包与 React Native 的包、JS 文件等，可以通过 import 方式引入到一个 JS 文件内，如 SampleProject/MainProject/src/bundles/basic/basic.js，再使用先前写好的 basics.config.js 当做参数传入到 --config 后。使用终端切换到项目根目录，执行命令：

  react-native bundle-harmony --dev false --entry-file ./src/bundles/basic/basic.js  --bundle-output ../../SampleApp/entry/src/main/resources/rawfile/bundle/basic/basic.harmony.bundle  --config ./basic.config.js
  

• 业务包 homepage：
  根据自己应用的业务逻辑，分出不同的业务入口，并使用 AppRegistry 注册业务的主 Component，如 SampleProject/MainProject/src/bundles/HomePage/index.js，使用先前写好的 homepage.config.js 传入到 --config 后。

  命令如下：

  react-native bundle-harmony --dev false --entry-file ./src/bundles/HomePage/index.js --bundle-output ../../SampleApp/entry/src/main/resources/rawfile/bundle/cp/homepage.harmony.bundle  --config ./homepage.config.js
  

也可以在 SampleProject/MainProject/package.json 文件中将上述两种命令中的路径，替换为自己实际项目的路径，分了几个业务包就需要执行几次命令，可以将命令使用 && 连接，汇总成一条命令去执行：

...
    "dev:basic":    "react-native bundle-harmony --dev false --entry-file ./src/bundles/basic/basic.js    --bundle-output ../../SampleApp/entry/src/main/resources/rawfile/bundle/basic/basic.harmony.bundle  --config ./basic.config.js",
    "dev:homepage": "react-native bundle-harmony --dev false --entry-file ./src/bundles/HomePage/index.js --bundle-output ../../SampleApp/entry/src/main/resources/rawfile/bundle/cp/homepage.harmony.bundle  --config ./homepage.config.js",
    "dev:goods":    "react-native bundle-harmony --dev false --entry-file ./src/bundles/Goods/index.js    --bundle-output ../../SampleApp/entry/src/main/resources/rawfile/bundle/cp/goods.harmony.bundle     --config ./goods.config.js",
    "dev:details":  "react-native bundle-harmony --dev false --entry-file ./src/bundles/Details/index.js  --bundle-output ../../SampleApp/entry/src/main/resources/rawfile/bundle/bp/details.harmony.bundle   --config ./details.config.js",
    "dev:test":     "react-native bundle-harmony --dev false --entry-file ./src/bundles/test/index.js     --bundle-output ../../SampleApp/entry/src/main/resources/rawfile/bundle/bp/test.harmony.bundle      --assets-dest ../../SampleApp/entry/src/main/resources/rawfile/assets --config ./test.config.js",
    "dev:sandbox":  "react-native bundle-harmony --dev false --entry-file ./src/bundles/Sandbox/index.js  --bundle-output ../../SampleApp/entry/src/main/resources/rawfile/bundle/bp/sandbox.harmony.bundle   --assets-dest ../../SampleApp/entry/src/main/resources/rawfile/assets --config ./sandbox.config.js",
    "dev:all":      "npm run dev:basic && npm run dev:homepage && npm run dev:goods && npm run dev:details && npm run dev:test && npm run dev:sandbox"
...

Bundle转字节码

​ 您可以将打包生成的 bundle 文件转换成字节码的形式进行加载，加载字节码具有提高执行效率、优化性能等优点。其转换工具在 React Native 工程执行 npm install 指令时就已下载在 node_modules 目录下。

1. 将打包出来的 bundle 文件放到 node_modules/react-native/sdks/hermesc/win64-bin 目录下。

2. 在该目录下打开终端控制台，输入转字节码命令。

   hermesc --emit-binary "输入的Bundle文件名" -out "输出文件名"
   

   例如：

   hermesc --emit-binary bundle.harmony.js -out hermes_bundle.hbc
   

3. 将生成的 .hbc 文件放回生成 bundle 的目录下，方便 native 工程在加载 bundle 时可以找到该字节码文件。

Metro启动

您可以使用 Metro 服务实时更新 bundle，请连接真机，并分别执行以下命令：

hdc rport tcp:8081 tcp:8081

npm run start

执行成功后显示以下的内容：

1. Metro 分包打包机制

这是 React Native 在鸿蒙平台上实现‌代码拆分‌的完整流程。通过将整个应用拆分为‌基础包‌和多个‌业务包‌，来优化应用性能。

2. 基础包 vs 业务包

‌基础包 (basic)‌：

• 包含 React Native 框架核心、鸿蒙适配层、通用组件
• 用户首次启动应用时加载，后续复用
• 配置相对简单，主要生成模块ID映射表
  ‌- 业务包 (homepage/goods/details 等)‌：

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