React Native项目自动化打包发布

今天这篇文章的目的是在rn项目的构建，并不会涉及到rn框架或者使用的讲解，说起构建，特别是前端构建大家应该很快会想到webpack、Grunt、 Gulp等。而这些工具在rn项目中就显得有些鸡肋。所以在此给大家分享一下不使用构建工具实现rn项目自动化打包发布的思路。

涉及到的工具

gitlab
docker

相关概念

1.GitLab CI是 GitLab 提供的持续集成服务，只要在你的仓库根目录创建一个.gitlab-ci.yml 文件，并为该项目指派一个Runner，当有合并请求或者 push的时候就会触发build。这个.gitlab-ci.yml 文件定义GitLab runner要做哪些操作。默认有3个[stages(阶段)]: build、test、deploy。更详细的可以查看官方文档

2.GitLab-Runner是配合GitLab-CI进行使用的。一般地，GitLab里面的每一个工程都会定义一个属于这个工程的软件集成脚本，用来自动化地完成一些软件集成工作。当这个工程的仓库代码发生变动时，比如有人push了代码，GitLab就会将这个变动通知GitLab-CI。这时GitLab-CI会找出与这个工程相关联的Runner，并通知这些Runner把代码更新到本地并执行预定义好的执行脚本。

所以，GitLab-Runner就是一个用来执行软件集成脚本的东西。你可以想象一下：Runner就像一个个的工人，而GitLab-CI就是这些工人的一个管理中心，所有工人都要在GitLab-CI里面登记注册，并且表明自己是为哪个工程服务的。当相应的工程发生变化时，GitLab-CI就会通知相应的工人执行软件集成脚本。如下图所示：

3.Pipelines是定义于.gitlab-ci.yml中的不同阶段的不同任务。我把Pipelines理解为流水线，流水线包含有多个阶段（stages），每个阶段包含有一个或多个工序（jobs），比如先购料、组装、测试、包装再上线销售，每一次push或者MR都要经过流水线之后才可以合格出厂。而.gitlab-ci.yml正是定义了这条流水线有哪些阶段，每个阶段要做什么事

编写gitlab—ci (以Android打包为例)

build_apk_release:stage: testwhen: manualvariables:GIT_SUBMODULE_STRATEGY: recursiveenvironment: Developmentscript:- zsh build.sh android Release ""artifacts:expire_in: 2 hrspaths:- K*.apkonly:- /^master$|^branch\/*|^release\/*/tags:- mac-shellcache:paths:- node_modules/

关键代码script，其实就是指向我们真正的打包脚本build.sh

编写build.sh

funBundle(){echo $1echo $2echo $3funWithInitcase $1 in"iOS")funWithiOS $2;;"android")funWithAndroid $2 $3;;"apks")funWithAndroidApks;;*)echo "not mismatchimg"esac}
funBundle $1 $2 $3

找到对应的funWithAndroid代码

funWithAndroidApks(){apkClearfor flavor in kuaibao huawei 360helper yingyongbao aliyun baidu xiaomi meizu uc jifeng sougou oppo vivo yiyonghui chuizi 91helper anzhi wandoujia mumayi yingyonghui anzhuo lianxiang huawei oppo vivo yiyonghui chuizi yiyou;dopushd android && ./gradlew "assemble${flavor}Release" && popddonegradle --stopcp  android/app/build/outputs/apk/apk/release/*.apk ~/Documents/Apks/gitClear
}

funWithAndroid(){apkClearassembleName="assemble$1$2"echo assembleNamepushd android && ./gradlew --no-daemon ${assembleName} && popdcp -r android/app/build/outputs/apk/*.apk .assembleApk=`ls *.apk`if [ "$1"x = "Release"x ]; thenpushApp ${assembleApk}figitClear}
}

pushApp(){apiKey='cd61f47742ae6d80****************'uKey='21607fc*********************'curl -F "file=@$1" -F "uKey=$uKey" -F "_api_key=$apiKey" https://www.pgyer.com/apiv1/****
}

脚本代码很简单，利用gradlew进行打包，通过最后一段代码上传至蒲公英这样一个自动打包上传脚本编写完成。ios可参照。

接下来我们来看看如何利用ci实现rn的热更打包，自动上传（这里使用code-push来实现热更，服务端是小编自己搭建的，后期可以分享给大家）

编写gitlab—ci 实现打包入口

build_hot_fix_stag:stage: testwhen: manualscript:- yarn config set registry https://registry.npm.taobao.org- yarn config set disturl https://npm.taobao.org/dist- yarn install- zsh autoppk.sh both Stagingonly:- /^master$|^branch\/*|^release\/*/tags:-  mac-shellcache:paths:- node_modules/

同样还是找重点，script中进行了3个步骤(npm/yarn)

设置淘宝镜像源
安装依赖
执行autoppk.sh脚本

编写打包脚本 autoppk.sh

#!/bin/bash
#read env
echo '正在准备发布热更新...'
bundle(){node packppk.js '****' $1 $2
}clean(){echo 'delete react-native-packager-cache'rm -rf ./react-native-packager-cache-*
}funBundle(){bundle $1 $2
}funBundle $1 $2
#clean

packppk.js

var codepushReleaseReact = require('./release-react')
var updateConfig = require('./update')function bundle() {console.log("玩命打包中 ......")const appName = process.argv[2] || 'app'const platform = process.argv[3] || 'both'const deploymentName = process.argv[4] || 'Staging'console.log('platform：'   platform)console.log('deploymentName：'   deploymentName)switch (platform) {case 'both':console.log('开始打包双平台')codepushReleaseReact({...updateConfig.ios,deploymentName}, 'ios', appName)codepushReleaseReact({...updateConfig.android,deploymentName}, 'android', appName)breakdefault:}
}bundle()

codepushReleaseReact

function reactNativeRelease (argv, platform, name) {return ["code-push","release-react",appName(name, platform),platform,`-d "${argv.deploymentName}"`,`--des "${argv.description}"`,`--dev ${argv.development}`,`-m ${argv.mandatory}`,targetBinary(argv.targetBinary)].join(" ")
}