React Native打包总结

打包的命令

react-native bundle命令，其中参数如图所示：

react-native bundle的参数介绍

其中主要参数的含义是：

• entry-file：js的根文件，在RN中一般是index.js或index.android.js/index.ios.js
• platform：平台，iOS或Android
• dev：开发者模式，若是false，警告会被禁止，bundle文件会被压缩
• bundle-output: 生成的bundle文件名
• assets-dest: 资源文件的文件夹

android:
react-native bundle --entry-file ./index.js --dev false --bundle-output ./android/app/src/main/assets/bundle/index.android.jsbundle --assets-dest ./android/app/src/main/res/ --platform android

ios基本类似：
react-native bundle --entry-file ./index.js --dev false --bundle-output ./ios/index.ios.jsbundle --assets-dest ./ios --platform ios

这些打包命令很长，参数多，我们可以在package.json文件中添加这些脚本命令:

"scripts": {
   "bundle-android": "react-native bundle --entry-file ./index.js --dev false --bundle-output ./android/app/src/main/assets/bundle/index.android.jsbundle --assets-dest ./android/app/src/main/res/ --platform android",
   "bundle-ios": "react-native bundle --entry-file ./index.js --dev false --bundle-output ./ios/index.ios.jsbundle --assets-dest ./ios --platform ios",
}

以后我们打bundle离线包，只需要执行npm脚本npm run bundle-android和npm run bundle-ios即可。

bundle文件分析

为了方便分析bundle文件的构成，研究打包的原理。我们打dev模式下的bundle包进行分析。

dev模式下的bundle文件 dev模式下的bundle文件

bundle文件中的js代码主要由三部分组成：

• 1.文件起始部分的polyfill代码：是最早执行的方法，定义了require,defined等方法,以及JS新语法的兼容代码。
• 2.模块定义代码：模块的定义声明。每一个__d方法代表一个js文件模块的定义。
• 3.模块的调用：

• define方法(__d方法)
  metroRequire方法(__r方法)