哪个做企业网站,wordpress迁hexo,望野拼音版注音,上海高新技术企业有哪些今天这篇文章的目的是在rn项目的构建#xff0c;并不会涉及到rn框架或者使用的讲解#xff0c;说起构建#xff0c;特别是前端构建大家应该很快会想到webpack、Grunt、 Gulp等。而这些工具在rn项目中就显得有些鸡肋。所以在此给大家分享一下不使用构建工具实现rn项目自动化打…今天这篇文章的目的是在rn项目的构建并不会涉及到rn框架或者使用的讲解说起构建特别是前端构建大家应该很快会想到webpack、Grunt、 Gulp等。而这些工具在rn项目中就显得有些鸡肋。所以在此给大家分享一下不使用构建工具实现rn项目自动化打包发布的思路。
涉及到的工具
gitlabdocker
相关概念
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 iniOS)funWithiOS $2;;android)funWithAndroid $2 $3;;apks)funWithAndroidApks;;*)echo not mismatchimgesac}
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(){apkClearassembleNameassemble$1$2echo assembleNamepushd android ./gradlew --no-daemon ${assembleName} popdcp -r android/app/build/outputs/apk/*.apk .assembleApkls *.apkif [ $1x Releasex ]; thenpushApp ${assembleApk}figitClear}
}
pushApp(){apiKeycd61f47742ae6d80****************uKey21607fc*********************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-cacherm -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] || appconst platform process.argv[3] || bothconst deploymentName process.argv[4] || Stagingconsole.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 每日更新前端技术
