《React-Native系列》8、RN如何打离线包

上一篇文章我们谈了bundle文件的加载和维护 ，以及在线包和离线包的区别，那我们今天来谈谈ReactNative如何打离线包。

我们先来看看官网怎么说的

Building your app for production 

You have built a great app using React Native, and you are now itching to release it in the App Store. The process is the same as any other native iOS app, with some additional considerations to take into account.

Disabling the developer menu 

Building an app for distribution in the App Store requires using the Release scheme in Xcode. Apps built for Release will automatically disable the in-app developer menu. This will prevent your users from inadvertently accessing the menu in production.

Using the offline bundle 

Set up your app to load your JavaScript, images, and other static assets from its resource bundle rather than the development server. This way you can test the app independently of the development server, and will allow you to distribute the app to beta testers and submit the app to the App Store.

1. Open ios/YourApp/AppDelegate.m
2. Uncomment the line, jsCodeLocation = [[NSBundle mainBundle] ...

App Transport Security 

App Transport Security is a security feature, added in iOS 9, that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server.

ATS is disabled by default in projects generated using the React Native CLI in order to make development easier. You should re-enable ATS prior to building your app for production by removing the NSAllowsArbitraryLoads entry from your Info.plist file in the ios/ folder.

看不出什么...  

那，我们还是自己来吧，先来看看打包命令

jack$ react-native bundle 
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                                                            [default: "/Users/jack/RN/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]
  --reset-cache       Removes cached files                                                                               [default: false]

几个主要的参数：

entry-file: RN的入口文件

bundle-out: 输出bundle文件的输出路径

asset-dest：输出的asset资源目录

完整的打包命令如下：

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

这样bundle文件就生成了。

打包的过程中，要确保引用的图片资源存在，否则会报错

[15:33:49] <START> Building Dependency Graph
[15:33:49] <START> Crawling File System
[15:33:49] <START> find dependencies
[15:33:53] <END>   Crawling File System (3716ms)
[15:33:53] <START> Building in-memory fs for JavaScript
[15:33:53] <END>   Building in-memory fs for JavaScript (161ms)
[15:33:53] <START> Building in-memory fs for Assets
[15:33:53] <END>   Building in-memory fs for Assets (118ms)
[15:33:53] <START> Building Haste Map
[15:33:53] <START> Building (deprecated) Asset Map
[15:33:53] <END>   Building (deprecated) Asset Map (67ms)
[15:33:53] <END>   Building Haste Map (300ms)
[15:33:53] <END>   Building Dependency Graph (4305ms)

/Users/jack/RN/node_modules/promise/lib/done.js:10
      throw err;
      ^
UnableToResolveError: Unable to resolve module image!tel from /Users/jack/RN/index.ios.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/image!tel and its parent directories

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.
    at /Users/jack/RN/node_modules/node-haste/lib/DependencyGraph/ResolutionRequest.js:477:17

这样我们就可以在Native代码中直接使用我们的bundle文件了。

那么问题来了，一个简单的项目bundle文件就差不多500K，如果以后我们接入的业务更多的话，那bundle文件是不是更大了？

参考下携程的解决方案：React Native Bundle拆分