Native之创设离线bundle,真机调节和测验

开发React Native的过程成,js代码和图片资源运行在一个Debug Server上,每次更新代码之后只需要使用command R键刷新就可以看到代码的更改,这种方式对于调试来说是非常方便的。但当我们需要发布App到App Store的时候就需要打包,使用离线的js代码和图片。这就需要把JavaScript和图片等资源打包成离线资源,在添加到Xcode中,然后一起发布到App Strore中。打包离线资源需要使用命令react-native bundle(注:文中使用的项目名称为RNIos)

关于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:使用帮助。

0x01 打bundle命令 (iOS Android 通用)

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]

首先,在RN开发成功一般都要自己先打一个离线bundle,测试看看是否会有问题,先看看我的打包命令:

React Native的react-native bundle命令是用来进行打包的命令,react-native bundle的详细命令选项

Android打包示例

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

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

0x02 Android 打包步骤 

打包步骤

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

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

注意:[./android/app/src/main/assets/]文件夹存在

2.增量升级的话不要把图片资源直接打包到res中,脚本如下:

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

3.保证MainActivity.java中的setBundleAssetName与你的jsbundle文件名一致,比如.setBundleAssetName(“index.android.jsbundle”)就与我生成的资源名一致

"iosBundle": "react-native bundle --entry-file Main/MainApp.js --bundle-output outPut/Bundles/MainApp.jsbundle --platform ios --dev false"

  • --entry-file ,ios或者android入口的js名称,比如index.ios.js
  • --platform ,平台名称(ios或者android)
  • --dev ,设置为false的时候将会对JavaScript代码进行优化处理。
  • --bundle-output, 生成的jsbundle文件的名称,比如./ios/bundle/index.ios.jsbundle
  • --assets-dest 图片以及其他资源存放的目录,比如./ios/bundle

IOS打包示例

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

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

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

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

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

0x03 iOS 打包步骤

1.在工程根目录下执行打包命令,比如react-native bundle –entry-file index.ios.js –bundle-output ./bundle/iosBundle/index.ios.jsbundle –platform ios –assets-dest ./bundle/iosBundle –dev false

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

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

3.参考官方文档,修改RN页面入口代码

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

可以看到上面的命令并没有把资源打包命令添加命令中,所以我们要修改为:

打包命令如下:

0x04 QA

ios打包遇到的问题

1.离线包如果开启了chrome调试,会访问调试服务器,而且会一直loading出不来。

2.如果bundle的名字是main.jsbundle,app会一直读取旧的,改名就好了。。。非常奇葩的问题,我重新删了app,clean工程都没用,就是不能用main.jsbundle这个名字。

3.必须用Create folder references【蓝色文件夹图标】的方式引入图片的assets,否则引用不到图片

4.执行bundle命令之前,要保证相关的文件夹都存在

"iosBundle": "react-native bundle --entry-file Main/MainApp.js --bundle-output outPut/MainApp.jsbundle --assets-dest outPut/Assets/ --platform ios --dev false"

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

可以看到,多了一个 --assets-dest,就是RN图片资源的输出路径

为了方便使用,也可以把打包命令写到npm script中:

既然RN的图片资源已经打包出来,接下来就需要把图片ios项目工程里面了:

"scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "bundle-ios":"node node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle" },

打开xcode,把打包出来的assets(离线包默认名称是assets)拖入工程,选择Create folder references【完成后显示蓝色文件夹图标】,把MainApp.jsbundle也拖入xcode里面,选择 Create groups就行了

然后运行命令直接打包:

修改获取bundle路径,不用localhost了,如下:

npm run bundle-ios

jsCodeLocation = [[NSBundlemainBundle]URLForResource:@"MainApp" withExtension:@"jsbundle"];

打包结果:

当当当当,把项目跑起来吧!!!!!!

...transformed 360/360 [8:56:31 PM] <END> find dependencies bundle: startbundle: finishbundle: Writing bundle output to: ./ios/bundle/index.ios.jsbundlebundle: Done writing bundle outputbundle: Copying 5 asset filesbundle: Done copying assets

可以看到jsbundle和资源文件已经打包成功。

离线包生成完成之后,可以在ios目录下看到一个bundle目录,这个目录就是bundle生成的离线资源。需要在Xcode中添加资源到项目中,必须使用Create folder references的方式添加文件夹.

  1. Add Files to "RNIos"

    图片 1add Files

  2. 选择bundle文件,在option中选择Create folder references图片 2选择文件夹

  3. 添加到项目中的文件夹必须是蓝色

    图片 3文件夹必须是蓝色

在ios中AppDelegate里可以看到设置JavaScript代码位置的代码:Debug Server上的设置

NSURL *jsCodeLocation; jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"RNIos" initialProperties:nil launchOptions:launchOptions];

在开发的过程中可以在这里配置Debug Server的地址,当发布上线的时候,就需要使用离线的jsbundle文件,因此需要设置jsCodeLocation为本地的离线jsbundle。设置离线的jsCodeLocation:

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index.ios" withExtension:@"jsbundle"];

离线包里的.jsbundle文件是经过优化处理的,因此运行效率也会比Debug的时候更高一些。

项目代码地址:

本文由星彩网app下载发布于计算机编程,转载请注明出处:Native之创设离线bundle,真机调节和测验

TAG标签: 星彩网app下载
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。