今天這篇文章的目的是在rn項目的構建，并不會涉及到rn框架或者使用的講解，說起構建，特別是前端構建大家應該很快會想到webpack、Grunt、 Gulp等。愛掏網 - it200.com而這些工具在rn項目中就顯得有些雞肋。愛掏網 - it200.com所以在此給大家分享一下不使用構建工具實現rn項目自動化打包發布的思路。愛掏網 - it200.com
涉及到的工具
- gitlab
- docker
相關概念
1.GitLab CI是 GitLab 提供的持續集成服務，只要在你的倉庫根目錄 創建一個.gitlab-ci.yml 文件， 并為該項目指派一個Runner，當有合并請求或者 push的時候就會觸發build。愛掏網 - it200.com 這個.gitlab-ci.yml 文件定義GitLab runner要做哪些操作。愛掏網 - it200.com 默認有3個[stages(階段)]: build、test、deploy。愛掏網 - it200.com 更詳細的可以查看官方文檔
2.GitLab-Runner是配合GitLab-CI進行使用的。愛掏網 - it200.com一般地，GitLab里面的每一個工程都會定義一個屬于這個工程的軟件集成腳本，用來自動化地完成一些軟件集成工作。愛掏網 - it200.com當這個工程的倉庫代碼發生變動時，比如有人push了代碼，GitLab就會將這個變動通知GitLab-CI。愛掏網 - it200.com這時GitLab-CI會找出與這個工程相關聯的Runner，并通知這些Runner把代碼更新到本地并執行預定義好的執行腳本。愛掏網 - it200.com
所以，GitLab-Runner就是一個用來執行軟件集成腳本的東西。愛掏網 - it200.com你可以想象一下：Runner就像一個個的工人，而GitLab-CI就是這些工人的一個管理中心，所有工人都要在GitLab-CI里面登記注冊，并且表明自己是為哪個工程服務的。愛掏網 - it200.com當相應的工程發生變化時，GitLab-CI就會通知相應的工人執行軟件集成腳本。愛掏網 - it200.com如下圖所示：
3.Pipelines是定義于.gitlab-ci.yml中的不同階段的不同任務。愛掏網 - it200.com 我把Pipelines理解為流水線，流水線包含有多個階段（stages），每個階段包含有一個或多個工序（jobs），比如先購料、組裝、測試、包裝再上線銷售，每一次push或者MR都要經過流水線之后才可以合格出廠。愛掏網 - it200.com而.gitlab-ci.yml正是定義了這條流水線有哪些階段，每個階段要做什么事
編寫gitlab—ci (以Android打包為例)
build_apk_release:
stage: test
when: manual
variables:
GIT_SUBMODULE_STRATEGY: recursive
environment: Development
script:
- zsh build.sh android Release ""
artifacts:
expire_in: 2 hrs
paths:
- K*.apk
only:
- /^master$|^branch\/*|^release\/*/
tags:
- mac-shell
cache:
paths:
- node_modules/
復制代碼關鍵代碼script，其實就是指向我們真正的打包腳本build.sh
編寫build.sh
funBundle(){
echo $1
echo $2
echo $3
funWithInit
case $1 in
"iOS")
funWithiOS $2
;;
"android")
funWithAndroid $2 $3
;;
"apks")
funWithAndroidApks
;;
*)
echo "not mismatchimg"
esac
}
funBundle $1 $2 $3
復制代碼找到對應的funWithAndroid代碼
funWithAndroidApks(){
apkClear
for 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;
do
pushd android && ./gradlew "assemble${flavor}Release" && popd
done
gradle --stop
cp android/app/build/outputs/apk/apk/release/*.apk ~/Documents/Apks/
gitClear
}
復制代碼funWithAndroid(){
apkClear
assembleName="assemble$1$2"
echo assembleName
pushd android && ./gradlew --no-daemon ${assembleName} && popd
cp -r android/app/build/outputs/apk/*.apk .
assembleApk=`ls *.apk`
if [ "$1"x = "Release"x ]; then
pushApp ${assembleApk}
fi
gitClear
}
}
復制代碼pushApp(){
apiKey='cd61f47742ae6d80****************'
uKey='21607fc*********************'
curl -F "file=@$1" -F "uKey=$uKey" -F "_api_key=$apiKey" https://www.pgyer.com/apiv1/****
}
復制代碼腳本代碼很簡單，利用gradlew進行打包，通過最后一段代碼上傳至蒲公英 這樣一個自動打包上傳腳本編寫完成。愛掏網 - it200.comios可參照。愛掏網 - it200.com
接下來我們來看看如何利用ci實現rn的熱更打包，自動上傳（這里使用code-push來實現熱更，服務端是小編自己搭建的，后期可以分享給大家）
編寫gitlab—ci 實現打包入口
build_hot_fix_stag:
stage: test
when: manual
script:
- yarn config set registry https://registry.npm.taobao.org
- yarn config set disturl https://npm.taobao.org/dist
- yarn install
- zsh autoppk.sh both Staging
only:
- /^master$|^branch\/*|^release\/*/
tags:
- mac-shell
cache:
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)
break
default:
}
}
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。愛掏網 - it200.com
當我們push項目，或者創建merge request的時候會觸發對應的CI pipeline，從而開始讓runner執行我們提前編寫好的job。愛掏網 - it200.com
對于一個前端項目來說，自動化的構建是很有必要的，同時我們也可以通過gitlab實現更多的功能比如eslint/Flow代碼檢測，單元測試等等。愛掏網 - it200.com利用腳本實現一些機械工作，提高工作效率。愛掏網 - it200.com
另外這種思路同樣適用于其他項目vue、react等前端項目，Android、ios等移動端項目。愛掏網 - it200.com區別只是在于如何利用各自的資源。愛掏網 - it200.com
文章可能有很多不足的地方，希望大家指正，同時也希望大家可以多多交流，分享出更多的技術方案，謝謝～～
技術交流群:581621024 關注小編