今天这篇文章的目的是搭建rn项目，不涉及rn框架及其使用说明。说到构建，尤其是前端构建，大家应该很快就会想到webpack、Grunt、Gulp等，而这些工具在rn项目中显得有些鸡肋。所以在这里跟大家分享一下不使用构建工具自动打包发布rn项目的思路。工具gitlabdocker的相关概念1、GitLabCI是GitLab提供的持续集成服务。只需在你的仓库根目录下创建一个.gitlab-ci.yml文件，并为项目分配一个Runner。当有mergerequest或push构建时会被触发。.gitlab-ci.yml文件定义了GitLab运行器应该执行的操作。默认有3个【阶段（stages）】：build、test、deploy。更多细节请参考官方文档2.GitLab-Runner与GitLab-CI配合使用。一般GitLab中的每个项目都会定义一个属于该项目的软件集成脚本，用于自动完成一些软件集成工作。当本项目的仓库代码发生变化时，比如有人推送了代码，GitLab会通知GitLab-CI发生变化。这时GitLab-CI会找出与这个项目关联的Runners，并通知这些Runners在本地更新代码，执行预定义的执行脚本。因此，GitLab-Runner是一个用来执行软件集成脚本的东西。你可以想象：Runner就像是每一个工人，而GitLab-CI就是这些工人的管理中心。所有工作人员都必须在GitLab-CI中注册并指明他们服务的项目。当相应的项目发生变化时，GitLab-CI会通知相应的worker执行软件集成脚本。如下图所示：3.Pipelines是.gitlab-ci.yml中定义在不同阶段的不同任务。我将管道理解为装配线。流水线包含多个阶段（stages），每个阶段包含一个或多个流程（jobs），如先采购材料，组装，测试，包装，然后在线销售。每次push或MR都通过流水线后，才有资格出厂。而.gitlab-ci.yml定义了这个管道的阶段，以及每个阶段要做什么。编写gitlab—ci（以安卓打包为例）build_apk_release:stage:testwhen:manualvariables:GIT_SUBMODULE_STRATEGY:recursiveenvironment:Developmentscript:-zshbuild.shandroidRelease""artifacts:expire_in:2hrspaths:-K*.apkonly:-/^master$|^branch\/*|^release\/*/tags:-mac-shellcache:paths:-node_modules/关键代码脚本，其实就是指向我们真正构建的打包脚本。shwritebuild.shfunBundle(){echo$1echo$2echo$3funWithInitcase$1in"iOS")funWithiOS$2;;"android")funWithAndroid$2$3;;"apks")funWithAndroidApks;;*)echo"notmismatchimg"esac}funBundle$1$2$3找到对应的funWithAndroidcodefunWithAndroidApks(){apkClearforflavorinkuaibaohuawei360helperyingyongbaoaliyunbaiduxiaomimeizuucjifengsougouoppovivoyiyonghuichuizi91helperanzhiwandoujiamumayiyingyonghuianzhu升爱享华为oppovivo易用会锤子易友；dopushdandroid&&./gradlew"assemble${flavor}Release"&&popddonegradle--stopcpandroid/app/build/outputs/apk/apk/release/*.apk~/Documents/Apks/gitClear}funWithAndroid(){apkClearassembleName="assemble$1$2"echoassembleNamepushdandroid&&./gradlew--no-daemon${assembleName}&&popdcp-randroid/app/build/outputs/apk/*.apk.assembleApk=`ls*.apk`if["$1"x="Release"x];然后pushApp${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:-yarnconfigsetregistryhttps://registry.npm.taobao.org-yarnconfigsetdisturlhttps://npm.taobao.org/dist-yarn安装-zshautoppk。shbothStagingonly:-/^master$|^branch\/*|^release\/*/tags:-mac-shellcache:paths:-node_modules/同样关注相同，脚本中进行了3步(npm/yarn)设置淘宝镜像源安装依赖执行autopk.sh脚本编写打包脚本autopk.sh#!/bin/bash#readenvecho'准备发布热更新...'bundle(){nodepackppk.js'****'$1$2}clean(){echo'删除react-native-packager-cache'rm-rf./react-native-packager-cache-*}funBundle(){bundle$1$2}funBundle$1$2#cleanpackppk。jsvarcodepushReleaseReact=require('./release-react')varupdateConfig=require('./update')functionbundle(){console.log("拼命打包...")constappName=process.argv[2]||'app'constplatform=process.argv[3]||'两者'constdeploymentName=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)打破默认值：}}bundle()codepushReleaseReactfunctionreactNativeRelease(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具体实现还是要看文章开头提到的Runner。当我们推送项目或者创建mergerequest时，相应的CIpipeline就会被触发，这样runner就会开始执行我们事先写好的job。对于一个前端项目来说，自动化构建是很有必要的，我们也可以通过gitlab实现更多的eslint/Flow代码检测、单元测试等功能。使用脚本实现一些机械的工作，提高工作效率。另外，这个思路也适用于vue、react等其他前端项目，以及Android、ios等移动端项目。区别仅在于如何使用各自的资源。文章中可能有很多不足之处，希望大家指正，也希望大家多交流，多分享技术方案，谢谢~~技术交流群：581621024关注小编公众号：LearningTech更新前端科技每天
