React-native 打包bundle

技术

我们知道，在刚开始学习React-native时，一步一步跟着官方文档创建了iOS demo，调试的过程中需要一直启动服务(npm start)。但是在没有启动服务时咱们点击程序，肯定是不行的，哐当又是满屏红了。一万个小羊复现在眼前。。。怎么办呢？

有没有想过在iOS、Android打包发布时，我们用rn写的这些东西咋集成呢？这时候就用到了bundle(因为以前是搞ios专用，Android目前还没有研究，应该是so？)，为啥用bundle呢，bundle就是一个文件夹，按照一定标准组织的目录结构。每个iOS APP至少有一个main bundle，这个main bundle包含了app的二进制代码及任何你用到的资源，如图片，声音，HTML文件等。换句话说，主bundle包含了所有资源，这些资源会被编译成二进制代码提交到App Store上。

我们用下面的命令打包集成：

react-native bundle 命令

• 工程目录下执行

react-native bundle --entry-file index.js --bundle-output /Users/wanglong/Documents/moreWorkTest/RN/FirstProject/bundle/iosBundle/index.jsbundle --platform ios --assets-dest /Users/wanglong/Documents/moreWorkTest/RN/FirstProject/bundle/iosBundle/ --dev flase

• 在xcode中添加bundle文件夹

• 在AppDelegate.m中选择使用main.jsbundle

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@”index.ios” withExtension:@”jsbundle”];

Options:
–entry-file Path to the root JS file, either absolute or relative to JS root [required]
–platform Either “iOS” or “android”
–transformer Specify a custom transformer to be used (absolute path) [default: “/Users/babytree-mbp13/projects/xcodeProjects/AwesomeProject/node_modules/react-native/packager/transformer.js”]
–dev If false, warnings are disabled and the bundle is minified [default: true]
–prepack If true, the output bundle will use the Prepack format. [default: false]
–bridge-config File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json
–bundle-output File name where to store the resulting bundle, ex. /tmp/groups.bundle [required]
–bundle-encoding Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer). [default: “utf8”]
–sourcemap-output File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map
–assets-dest Directory name where to store assets referenced in the bundle
–verbose Enables logging [default: false]

老铁们，这样从新运行app以后，不用起服务这样点一下APP试试效果吧。
ok了吧。不过这样的话不能调试了哦，想要调试的话，记得把bundleURL改回去。