React-Native 离线bundle

2022-03-09 19:20:46 浏览数 (2)

关于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”];

0 人点赞