ReactNative - 打离线包 (一) 原生RN命令打包

2017-01-03 本文已影响12775人暮落晨曦

ReactNative 是由 Facebook 基于 React.js 开发的一套跨平台开发框架。
相信看到这篇文章的人对 ReactNative 已经有过一些了解，这里不作过多赘述。
本文主要基于 ReactNative 打离线包这件事进行详解。

离线包

离线包就是把 ReactNative 和你写的 js文件、图片等资源都打包放入 App ，不需要走网络下载。

ReactNative 打包命令说明

使用 react-native bundle --help 来查看打包的具体参数

  react-native bundle [options]
  builds the javascript bundle for offline use

  Options:

    -h, --help                   output usage information
    --entry-file <path>          Path to the root JS file, either absolute or relative to JS root
    --platform [string]          Either "ios" or "android"
    --transformer [string]       Specify a custom transformer to be used
    --dev [boolean]              If false, warnings are disabled and the bundle is minified
    --prepack                    When passed, the output bundle will use the Prepack format.
    --bridge-config [string]     File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json
    --bundle-output <string>     File name where to store the resulting bundle, ex. /tmp/groups.bundle
    --bundle-encoding [string]   Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer).
    --sourcemap-output [string]  File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map
    --assets-dest [string]       Directory name where to store assets referenced in the bundle
    --verbose                    Enables logging
    --reset-cache                Removes cached files
    --config [string]            Path to the CLI configuration file

以上为官方给出的解释，我们来对应的翻译下每条参数的含义。

  react-native bundle [参数]
  构建 js 离线包 

  Options:

    -h, --help                   输出如何使用的信息
    --entry-file <path>          RN入口文件的路径, 绝对路径或相对路径
    --platform [string]          ios 或 andorid
    --transformer [string]       Specify a custom transformer to be used
    --dev [boolean]              如果为false, 警告会不显示并且打出的包的大小会变小
    --prepack                    当通过时, 打包输出将使用Prepack格式化
    --bridge-config [string]     使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
    --bundle-output <string>     打包后的文件输出目录, 例: /tmp/groups.bundle
    --bundle-encoding [string]   打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.
    --sourcemap-output [string]  生成Source Map，但0.14之后不再自动生成source map，需要手动指定这个参数。例: /tmp/groups.map
    --assets-dest [string]       打包时图片资源的存储路径
    --verbose                    显示打包过程
    --reset-cache                移除缓存文件
    --config [string]            命令行的配置文件路径

看过了以上的翻译，基本对每条参数都有了一定的了解，我们来实际操作下打包的步骤。

ReactNative 打离线包流程 (举例iOS)

首先你得有个 ReactNative 的工程。这里以空工程打包为例:

1.创建新工程

react-native init RNBundleDemo

2.执行打包命令

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

3.查看执行完打包命令后的结果

Unable to parse cache file. Will clear and continue.
[2017-1-3 16:58:56] <START> Initializing Packager
[2017-1-3 16:58:56] <START> Building in-memory fs for JavaScript
[2017-1-3 16:58:56] <END>   Building in-memory fs for JavaScript (74ms)
[2017-1-3 16:58:57] <START> Building Haste Map
[2017-1-3 16:58:57] <END>   Building Haste Map (392ms)
[2017-1-3 16:58:57] <END>   Initializing Packager (498ms)
[2017-1-3 16:58:57] <START> Transforming files
[2017-1-3 16:58:57] <END>   Transforming files (436ms)
bundle: start
bundle: finish
bundle: Writing bundle output to: ./ios/bundle/index.ios.jsbundle
bundle: Copying 5 asset files
bundle: Done writing bundle output
bundle: Done copying assets

打包完成后, 目录结构

4.将 assets 和 index.ios.jsbundle 引入工程

引入目录后的层级结构

注意: assets 目录导入工程中时，要选择 Create folder references，因为这是图片素材。

5.修改AppDelegate中的代码

NSURL *jsCodeLocation;

// jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
jsCodeLocation = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"index.ios.jsbundle" ofType:nil]];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"RNBundleDemo"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

6.如果要真机测试或打包上传应用, 需要进行如下修改

因为 ReactNative 自带 Chrome 的 Debug 模式, 因此需要修改成 Release ，来关闭掉 Debug 模式

修改工程的编译模式

7.打包上传或真机调试，与iOS工程无异。

ReactNative 打离线包中注意事项

打包命令中的路径(文件夹一定要存在)
必须用 Create folder references 的方式引入图片的 assets ，否则引用不到图片
不能用 main.jsbundle 来命名打包后的文件，否则会出现问题

参考文章

https://segmentfault.com/a/1190000004189538
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
http://402v.com/react-nativeru-men-shi-li-jiao-cheng-xiang-mu-da-bao-fa-bu/
https://nodejs.org/api/buffer.html#buffer_buffer
http://reactnative.cn/docs/0.39/running-on-device-ios.html#content

文章预告

下篇文章我会进行携程 moles-packer 框架的分包过程及命令。欢迎大家继续关注 ReactNative - 打离线包 (二) 携程Moles-Packer框架命令打包。