React Native实战(二):Android的打包

http://www.csdn.net/article/1970-01-01/2825835

http://www.csdn.net/article/1970-01-01/2825835


React Native实战(二):Android的打包

发表于 2015-09-30 14:3815086次阅读| 来源 CSDN7 条评论| 作者 廖祜秋
allowtransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?url=http%3A%2F%2Fwww.csdn.net%2Farticle%2F1970-01-01%2F2825835&type=3&count=&appkey=&title=%E6%9C%AC%E6%96%87%E4%B8%BAMDCC%E5%B9%B3%E5%8F%B0%E4%B8%8E%E6%8A%80%E6%9C%AFAndroid%E4%B8%93%E5%9C%BA%E6%BC%94%E8%AE%B2%E5%98%89%E5%AE%BE%E2%80%94%E2%80%94%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4%E5%B7%A5%E7%A8%8B%E5%B8%88%E5%BB%96%E7%A5%9C%E7%A7%8B%E7%9A%84React%20Native%E5%AE%9E%E6%88%98%E7%AC%AC%E4%BA%8C%E7%AF%87%EF%BC%8C%E5%9C%A8React%20Native%E7%9A%84%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%E5%92%8C%E5%9F%BA%E6%9C%AC%E7%9A%84%E5%BC%80%E5%8F%91%E8%B0%83%E8%AF%95%E4%B9%8B%E5%90%8E%EF%BC%8C%E4%BB%8B%E7%BB%8D%E4%BA%86React%20Native%E4%B8%AD%E7%9A%84%E8%B5%84%E6%BA%90%E6%89%93%E5%8C%85%E6%96%B9%E5%BC%8F%EF%BC%8C%E5%B9%B6%E7%9D%80%E9%87%8D%E4%BA%8EAndroid%E5%BA%94%E7%94%A8%E7%9A%84%E6%89%93%E5%8C%85%E3%80%82&pic=&ralateUid=&language=zh_cn&rnd=1474089953631" width="22" height="16"> 摘要:本文为MDCC平台与技术Android专场演讲嘉宾——阿里巴巴工程师廖祜秋的React Native实战第二篇,在React Native的环境配置和基本的开发调试之后,介绍了React Native中的资源打包方式,并着重于Android应用的打包。

10月14日-16日,由CSDN和创新工场联合主办的MDCC 2015中国移动开发者大会将在北京新云南皇冠假日酒店隆重召开,现在抢注大会门票,即享多重好礼!


上一篇文章提到了 React Native 的环境配置和基本的开发调试。本文介绍 React Native 中的资源打包,重点介绍使用 react-native-gradle 插件进行 Android APP 的打包。

关于打包

打包目的

除了热部署,我们知道,APP 运行的时候不应再从 Debug Server 获取资源。分发应用时 JS 资源应该被打包到 APP 中。

另外对外发布的安装包,资源中的业务代码的混淆也是必须的。

React Native 打包方式

目前 iOS 应用可用 react-native bundle 命令进行打包,同时对 Android 的支持工作也已经开始了。但在目前 npm 中最新的版本(0.11.4)暂时还不支持。 最新的代码中看似已经支持了,但还没最终发布。等正式发布支持了,我另写一篇文章介绍使用 react-native bundle 命令进行打包。

目前对于 Android 的 React Native 应用,可用 react-native-gradle 插件进行打包。该插件灵活配置打包参数,使用 Gradle Task 将资源打包到资源文件夹。

但 官方计划使用 react-native bundle 命令进行打包,并且有放弃对 Gradle 插件支持的倾向。

都使用 react-native bundle 进行打包,对开发人员来说,只要掌握一套打包命令即可。但是对于 Android 的开发者来说,插件方式似乎更符合平时的开发习惯。各位自行取舍。

React Native 开发目前非常活跃,代码变迭频繁,本文所讨论的代码版本为: https://github.com/facebook/react-native/tree/0ff3a421c9adbe4137e07e158c9812062b34ea5a 
本文中目前所指的时间为: 2015年09月28日20点,太平洋时间;中国2015年09月29日11点。

react-native-gradle 插件

编译插件

借助插件 react-native-gradle: com.facebook.react:gradleplugin:1.0.+可完成混淆及资源打包。

然而这个插件并没有发布到 JCenter 或者 Maven Centry。需要自己编译,然后发布到本地 Maven 库。源码在 react-native-gradle目录下。按照 文档编译安装:

mac-2:react-native-gradle srain$ gradle build install

结果是测试用例报错,这个问题,官方一直没修复,且置之不理。 给出的解释前面提到了。

我们可跳过测试用例,直接安装。虽然官方提供的测试用例本身有问题,无法进行测试,但我亲测可用。

题外话,对于给出的解释,显得非常不讲究,目前整个项目处于高度活跃中,文档和实际功能严重脱节,很多不一致的地方。 看来任何团队都会面临项目压力,变得节奏不再优雅啊,所谓的理想团队都是瞬时态。

跳过测试用例,直接安装:

mac-2:react-native-gradle srain$ gradle install

安装完成:

mac-2:react-native-gradle srain$ ll ~/.m2/repository/com/facebook/react/gradleplugin/
total 8
drwxr-xr-x  5 srain  staff  170 Sep 28 15:10 1.0.0-SNAPSHOT
-rw-r--r--  1 srain  staff  326 Sep 28 15:10 maven-metadata-local.xml

在项目中使用

build.gradle 配置如下:

[cpp]  view plain copy
  1. buildscript {  
  2.     repositories {  
  3.         mavenLocal()    // 本地依赖  
  4.         jcenter()  
  5.     }  
  6.     dependencies {  
  7.         classpath 'com.android.tools.build:gradle:1.3.0'  
  8.         classpath 'com.facebook.react:gradleplugin:1.0.+'   // 插件依赖  
  9.     }  
  10. }  

app/build.gradle:

[cpp]  view plain copy
  1. apply plugin: 'com.facebook.react'  
  2.   
  3. react {  
  4.     bundleFileName "index.android.bundle"   // assets 目录下 js 文件名  
  5.     bundlePath "/index.android.bundle"      // js 路径  
  6.     jsRoot "../"                            // js 源文件位置  
  7.     packagerHost "localhost:8081"           // debug server 地址  
  8.     packagerCommand "./node_modules/react-native/packager/packager.sh"  // 打包命令地址  
  9.   
  10.     devParams {  
  11.         skip true  
  12.         dev true  
  13.         inlineSourceMap false  
  14.         minify false  
  15.         runModule true  
  16.     }  
  17.     releaseParams {  
  18.         skip false  
  19.         dev false  
  20.         inlineSourceMap false  
  21.         minify true  
  22.         runModule true  
  23.     }  
  24. }  

配置说明

上面 react 项中的配置已经在注释中说明。其中,packagerCommand 官方给出的文档描述有误

  • devParams 和 releaseParams 分别 debug 版本和 release 版本的参数。它们各有五个参数:
  • skip 参数为 true 则跳过从本地资源加载,从 Debug Server 请求资源。为 false 时从打包资源,运行时,从本地加载。

其他四个参数通过 url 传给 Debug Server。比如:http://localhost:8081/index.android.bundle?dev=true&inlineSourceMap=true&minify=false&runModule=true。

参数意义如下:

  1. dev: 等同于全局变量 __DEV__, React Native 核心类库的开发选项。
  2. minify: 混淆。
  3. inlineSourceMap: 是否加入 source map。默认为 false。
  4. runModule: 默认为 true,是否在最后以 require(XXX) 的形式加入 module 的入口点。如:require("AwesomeProject/index.android.js");

参数的英文说明文档在:  https://github.com/facebook/react-native/blob/master/packager/README.md

打包

每次打包,插件都会根据配置,决定是否打包以及以怎样的配置打包资源。

Demo

这里是一个 Demo: https://github.com/liaohuqiu/ReactNativeTestGradlePlugin

Demo 主要演示了 build.gradle 的配置,用 Android Stuido 打开即可运行,不要修改 Dev Setting 中的 Debug Server,因为资源都已经打包,不再在从 Debug Server 下载。可以解开 debug.apk 看 assets 目录下的文件。

其中包含了一个编译安装 react-native-gradle 到本地 Maven 库的脚本,运行即可。

react-native bundle 命令简介

命令用法如下:

mac-2:AwesomeProject srain$ react-native bundle --help
Usage: react-native bundle [options]

Options:
  --dev     sets DEV flag to true,同插件配置的 dev 
  --minify  minify js bundle,同插件配置的 minify
  --root        add another root(s) to be used in bundling in this project
  --assetRoots      specify the root directories of app assets
  --out     specify the output file, 输出文件的位置
  --url     specify the bundle file url,js bundle 路径

对 iOS 打包时:

react-native bundle --minify

本文写于旅途,从洛杉矶到旧金山的 greyhound 大巴车上。时间仓促,水平有限,如有谬误,还请纠正,原始文档在这里


预告:  2015中国移动开发者大会(MDCC 2015)将于10月14日-16日在北京新云南皇冠假日酒店召开。大会特设九大技术专场:平台与技术(iOS)、平台与技术(Android)、平台与技术(跨平台)、产品与设计、游戏开发、企业移动化、虚拟现实专场、硬件开发与技术、嵌入式开发。大会将聚集国内最具实力的产品技术团队,与开发者一道进行最前沿的探讨与交流。 

第一时间掌握最新移动开发相关信息和技术,请关注mobilehub公众微信号(ID: mobilehub)。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值