React Native 默认支持 hermes

[shinken008]

设计：

Hermes是针对 React Native 优化的 JavaScript 引擎。通过提前将 JavaScript 编译成字节码，Hermes 可以改善你的应用启动时间。Hermes 的二进制大小也比其他 JavaScript 引擎小，例如 JavaScriptCore (JSC)。它在运行时使用的内存也更少，这在低端 Android 设备上特别有价值。

JS 侧：

1. metro config 默认配置支持 transformer.hermesParser，开启后编译解析阶段 hermes-parse 代替 babel-parser 解析

2. 编译开启 transformProfile，开启后 babel-preset 能精简一些 babel 插件

   module.exports = {
     presets: [
       [
         'module:metro-react-native-babel-preset',
         {
           unstable_transformProfile: 'hermes-stable', // 'hermes-stable' | 'hermes-canary'
         },
       ],
     ],
   };

3. build 环境打包出 js bundle 和二进制 bundle main.jsbundle.hbc

   3.1 提供二进制打包配置，os 指定等

   node_modules/hermes-engine/osx-bin/hermesc -emit-binary -out bundle/ios/main.jsbundle.hbc bundle/ios/main.jsbundle

4. dev 环境不处理，输出 js bundle

   在 metro 有一个实验型的包， metro-hermes-compiler 提供 API 将 JS Code 编译成字节码。在 metro-transform-worker 里面有使用，对每个请求进来 transform JS 还可选择编译成二进制，需要unstable_transformProfile 和 runtimeBytecodeVersion 参数。比如：通过 url 的方式访问 'http://localhost:8081/index.bundle?platform=ios&unstable_transformProfile=hermes-stable&runtimeBytecodeVersion=84 '，目前看来，通过这种方式在开发环境转成字节码的意义并不大。

   而且，壳子连接 metro server 发起 bundle 打包请求时，比如本地的壳子：'/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.myProject'，url 格式化后： 'http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.myProject '，
   缺少两个参数（需要某种方式加上）。

   综上，dev 环境不对 bundle 转成字节码，js bundle 壳子 JS 引擎自己处理。

Native 侧：

1. 开启 hermes 配置
   ios/Podfile 文件修改

   use_react_native!(
       :path => config[:reactNativePath],
       # to enable hermes on iOS, change `false` to `true` and then install pods
       # By default, Hermes is disabled on Old Architecture, and enabled on New Architecture.
       # You can enable/disable it manually by replacing `flags[:hermes_enabled]` with `true` or `false`.
   -    :hermes_enabled => flags[:hermes_enabled],
   +    :hermes_enabled => true
   )
   

   重新 podinstal

   cd ios && pod install
   npx react-native run-ios

   android/app/build.gradle 文件修改

   project.ext.react = [
       entryFile: "index.js",
   -     enableHermes: false  // clean and rebuild if changing
   +     enableHermes: true  // clean and rebuild if changing
   ]

   安装过需要清理

   cd android && ./gradlew clean

   npx react-native run-android

2. Hermes 开启后

   开启 Hermes 在构建时将 js bundle 编译成二进制，Hermes引擎本身支持 JS Code 和二进制码，所以开启后对 bundle 也不做要求。

3. 应用自身构建包

   开启 hermes 在 release 模式下，应用将构建一个二进制 bundle 的 release 包。

   ios：

   npx react-native run-ios --configuration Release

   android：

   npx react-native run-android --variant release

4. 默认调试 debugger chrome inspect 代替 debugger-ui，与 web 提供调试一致，摇一摇失效。