(十八) ReactNative 发布线上时打包详解

使用Reactnative   进行 bundle的打包 

 一. 使用 curl  liunx/unix 命令  进行bundle  打包  （不能对图片资源等进行打包，）

 1）. curl    url :拉去网页上对应的数据  

1

curl http://www.baidu.com 

如发现乱码，可以使用iconv转码：

1

curl http://iframe.ip138.com/ic.asp|iconv -fgb2312

iconv的用法请参阅：在Linux/Unix系统下用iconv命令处理文本文件中文乱码问题

 2）. Linux curl使用代理：

  linux curl使用http代理抓取页面：

1

2

curl -x 111.95.243.36:80 http://iframe.ip138.com/ic.asp|iconv -fgb2312

curl -x 111.95.243.36:80 -U aiezu:password http://www.baidu.com

使用socks代理抓取页面：

1

2

curl --socks4 202.113.65.229:443 http://iframe.ip138.com/ic.asp|iconv -fgb2312

curl --socks5 202.113.65.229:443 http://iframe.ip138.com/ic.asp|iconv -fgb2312

代理服务器地址可以从爬虫代理上获取。

3).linux curl处理cookies

接收cookies: 

1

curl -c /tmp/cookies http://www.baidu.com #cookies保存到/tmp/cookies文件

发送cookies:

1

2

curl -b "key1=val1;key2=val2;" http://www.baidu.com #发送cookies文本

curl -b /tmp/cookies http://www.baidu.com #从文件中读取cookies

4). linux curl发送数据：

linux curl get方式提交数据： 

1

curl -G -d "name=value&name2=value2" http://www.baidu.com 

linux curl post方式提交数据：

1

2

curl -d "name=value&name2=value2" http://www.baidu.com #post数据

curl -d a=b&c=d&txt@/tmp/txt http://www.baidu.com  #post文件

以表单的方式上传文件： 

1

curl -F file=@/tmp/me.txt http://www.aiezu.com 

相当于设置form表单的method="POST"和enctype='multipart/form-data'两个属性。

5）. linux curl http header处理：

设置http请求头信息：

1

2

3

curl -A "Mozilla/5.0 Firefox/21.0" http://www.baidu.com #设置http请求头User-Agent

curl -e "http://pachong.org/" http://www.baidu.com #设置http请求头Referer

curl -H "Connection:keep-alive \n User-Agent: Mozilla/5.0" http://www.aiezu.com

设置http响应头处理：

1

2

curl -I http://www.aiezu.com #仅仅返回header

curl -D /tmp/header http://www.aiezu.com #将http header保存到/tmp/header文件

6）. linux curl认证： 

1

2

curl -u aiezu:password http://www.aiezu.com #用户名密码认证

curl -E mycert.pem https://www.baidu.com #采用证书认证

6）. 其他 

1

2

curl -# http://www.baidu.com #以“#”号输出进度条

curl -o /tmp/aiezu http://www.baidu.com #保存http响应到/tmp/aiezu

二 .使用reactNative  自动的命令进行打包

打包时必须处于node_modules 的目录下

react-native  -h  

58deMacBook-Pro:react a58$ react-native -h

Command `-h` unrecognized

Usage: react-native <command>

Commands:

  - start: starts the web server     : 使用react-native start  启动本地的web server     在手动集成react-native时用到 

  - bundle: builds the javascript bundle for offline use: react-native bundle   来打包生成离线的bundle 包和assets包

58deMacBook-Pro:react a58$ 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 (absolute path)                                            [default: "/Users/a58/Desktop/fouthDev/QianGuiAppReact_Pod/QianGuiApp/react/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]

Missing required arguments: entry-file, bundle-output

58deMacBook-Pro:react a58$ 

#

react-native bundle --entry-file  [index.ios.js /index.anroid.js的路径]  --bundle-output [打包完成后输出bundle 存放的目录] --platform [ios/android打包的平台]   --assets-dest ［打包生成assets 时存放的目录］  --dev  false   

特别注意：--assets-dest 会搜索整个bundle中所引用到的图片资源，并进行打包生成assets 图片库供bundle  包进行使用

--entry-file: js文件的路径，既可以是绝对路经和相对路径

--paltform  :  打包对应的平台  //  ios   android 

--dev       :   开发还是发布   false 为发布，会对bundle 包进行压缩

--bundle-output:  生成bundle 的存放路径 

--assets-dest  : 生成assets  资源对应的存放路径

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

  - unbundle: builds javascript as "unbundle" for offline use    // 将

  - new-library: generates a native library bridge

  - link: Adds a third-party library to your project. Example: react-native link awesome-camera

  - android: generates an Android project for your app

  - run-android: builds your app and starts it on a connected Android emulator or device

  - run-ios: builds your app and starts it on iOS simulator

  - upgrade: upgrade your app's template files to the latest version; run this after updating the react-native version in your package.json and running npm install