React-Native之制作离线bundle

关于react-native bundle

react-native bundle是react-native-cli的一个命令，制作离线包需要用到react-native bundle命令行，我们先来了解下react-native bundle可选参数都有哪些，如果熟悉webpack打包的朋友对下面的参数会很熟悉：

--entry-file <path>：配置入口JS文件路径，可以是绝对路径，也可以是相对于根目录的相对路径。

--platform [string]：需要编译的平台，“ios”或“android”(默认:ios)。

--transformer [string]：指定要使用的自定义代码转换工具。

--dev [boolean]：是否使用开发者环境，如果是false，则禁用警告并将压缩代码(默认为true)。

--minify [boolean]：是否压缩代码。如果dev为真，则默认为false，如果dev为false，则为true。禁用迷你化可以加速构建，对于测试是很有用的。

--bundle-output <path>：bundle的输出路径，用于存储所打包后的代码。

--bundle-encoding [string]：编码。(默认值:utf8)。

--max-workers [number]：指定用于转换文件的最大工作池。这个默认值是电脑可用的内核数。

--sourcemap-output [string]：sourcemap的输出文件名。

--sourcemap-sources-root [string]：sourcemap的输出目录（默认要写相对路径）。

--sourcemap-use-absolute-path：启用sourcemap输出目录使用绝对路径。

--assets-dest [string]：bundle中引用的文件目录名称。

--verbose：启用日志。

--reset-cache：删除缓存文件。

--read-global-cache：从全局缓存中获取转换的JS代码。

--config [string]：指定一个CLI配置文件路径。

-h, --help：使用帮助。

Android打包示例

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

注意:1.[./android/app/src/main/assets/]里的assets文件夹若不存在则创建一个。2.增量升级的话不要把图片资源直接打包到res中，要用--assets-dest ./bundle/androidBundle/ 。

IOS打包示例

1.在工程根目录下执行打包命令

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

注意要先保证bundle文件夹存在。 

2.在xcode中添加assets【必须用Create folder references的方式，添加完是蓝色文件夹图标】和index.ios.bundle 

3.参考官方文档，修改AppDelegate.m文件, jsCodeLocation = [[NSBundle mainBundle] URLForResource:@”index.ios” withExtension:@”bundle”];