React Native项目自动化打包发布

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

涉及到的工具

gitlab
docker

编写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(" ")
}

至此rn热更打包，自动上传就已经完成了，相信了解过code-push的同学应该很容易理解脚本的含义，在实际项目中写完脚本并不算真正的结束，我们要利用脚本实现自动化，解放双手

将我们写好的脚本部署到gitlab

说到脚本的部署其实gitlab已经帮我们做好了，当我们在项目中创建gitlab-ci.yml时，部署工作就算完成，剩下的就是编写具体的job，而我们编写好的job具体实现就得靠文章一开始所提到的Runner。

当我们push项目，或者创建merge request的时候会触发对应的CI pipeline，从而开始让runner执行我们提前编写好的job。

对于一个前端项目来说，自动化的构建是很有必要的，同时我们也可以通过gitlab实现更多的功能比如eslint/Flow代码检测，单元测试等等。利用脚本实现一些机械工作，提高工作效率。

另外这种思路同样适用于其他项目vue、react等前端项目，Android、ios等移动端项目。区别只是在于如何利用各自的资源。

文章可能有很多不足的地方，希望大家指正，同时也希望大家可以多多交流，分享出更多的技术方案，谢谢～～

技术交流群:581621024 关注小编公众号：LearningTech 每日更新前端技术