RN 原生混编中的本地离线打包

RN这种面向生产力的框架介绍的文档网上一堆，就不和大家介绍了，我们前端框架刚好是React，我们的构想就是移动端和前端有更多的互动，在不加人头的基础上提高开发迭代速度

本文基于原生与RN(0.48)混编的项目来描述，前提是您已经将RN框架导入到项目并可以正常运行，我们的项目目录结构与RN原生项目有着相同的目录结构

--entry-file <path>                Path to the root JS file, either absolute or relative to JS root
RN项目的入口文件相对/相对路径
--platform [string]                Either "ios" or "android"
输入‘ios’或‘android’
--transformer [string]             Specify a custom transformer to be used
指定自定义的transformer文件绝对/相对路径[default: "./node_modules/react-native/packager/transformer.js"]
--dev [boolean]                    If false, warnings are disabled and the bundle is minified
如果为false, 不显示警告并且bundle会变小[default: true]
--bundle-output <string>           File name where to store the resulting bundle, ex. /tmp/groups.bundle
打包后的文件输出目录, 例: /tmp/groups.bundle
--bundle-encoding [string]         Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer).
归档文件至 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.
--max-workers [number]             Specifies the maximum number of workers the worker-pool will spawn for transforming files. This defaults to the number of the cores available on your machine.
指定用于产生转换文件的worker-pool的最大工作数，默认与设备处理器核心相同
--sourcemap-output [string]        File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map
映射文件的名称
--sourcemap-sources-root [string]  Path to make sourcemap's sources entries relative to, ex. /root/dir
映射文件的路径
--sourcemap-use-absolute-path      Report SourceMapURL using its full path
使用SourceMapURL的绝对路径
--assets-dest [string]             Directory name where to store assets referenced in the bundle
打包图片资源的存储的绝对/相对路径
--verbose                          Enables logging
显示打包过程
--reset-cache                      Removes cached files
清除缓存文件
--read-global-cache                Try to fetch transformed JS code from the global cache, if configured.
--config [string]                  Path to the CLI configuration file
命令行的配置文件路径
-h, --help                         output usage information

我们以原生的RN空项目为例

执行打包命令，我们直接将打包的文件打进工程

react-native bundle --entry-file index.ios.js --bundle-output ./ios/XXX/index.ios.jsbundle --platform ios --assets-dest ./ios/XXX/ --dev false

执行后的目录(项目中没有引入图片等资源，没有asset文件)

将jsbundle文件和asset目录导入项目

assets 目录导入工程中时，要选择 Create folder references，因为这是图片素材。
还有个很关键的就是，jsbundle文件一定要导入到copy bundle resources 里面，不然之后通过ios原生的path(forResource: "main.jsbundle", ofType: nil)这个方法找不到路径

希望我的文章能帮助到大家~