React Native專案自動化打包釋出

百葉發表於2018-06-15
React Native

今天這篇文章的目的是在rn專案的構建，並不會涉及到rn框架或者使用的講解，說起構建，特別是前端構建大家應該很快會想到webpack、Grunt、 Gulp等。而這些工具在rn專案中就顯得有些雞肋。所以在此給大家分享一下不使用構建工具實現rn專案自動化打包釋出的思路。

涉及到的工具
  1. gitlab
  2. 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就會通知相應的工人執行軟體整合指令碼。如下圖所示：

1171685-20170629165716758-915731937-2.png

3.Pipelines是定義於.gitlab-ci.yml中的不同階段的不同任務。
我把Pipelines理解為流水線，流水線包含有多個階段（stages），每個階段包含有一個或多個工序（jobs），比如先購料、組裝、測試、包裝再上線銷售，每一次push或者MR都要經過流水線之後才可以合格出廠。而.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進行打包，通過最後一段程式碼上傳至蒲公英
這樣一個自動打包上傳指令碼編寫完成。ios可參照。

接下來我們來看看如何利用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)

  1. 設定淘寶映象源
  2. 安裝依賴
  3. 執行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。

當我們push專案，或者建立merge request的時候會觸發對應的CI pipeline，從而開始讓runner執行我們提前編寫好的job。

對於一個前端專案來說，自動化的構建是很有必要的，同時我們也可以通過gitlab實現更多的功能比如eslint/Flow程式碼檢測，單元測試等等。利用指令碼實現一些機械工作，提高工作效率。

另外這種思路同樣適用於其他專案vue、react等前端專案，Android、ios等移動端專案。區別只是在於如何利用各自的資源。

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

技術交流群:581621024
關注小編 公眾號：LearningTech
每日更新前端技術

qrcode_for_gh_4dda50fa73f6_430.jpg

相關文章