摘要：所以在此給大家分享一下不使用構建工具實現項目自動化打包發布的思路。對于一個前端項目來說，自動化的構建是很有必要的，同時我們也可以通過實現更多的功能比如代碼檢測，單元測試等等。另外這種思路同樣適用于其他項目等前端項目，等移動端項目。

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

涉及到的工具

gitlab

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就會通知相應的工人執行軟件集成腳本。如下圖所示：

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)

設置淘寶鏡像源

安裝依賴

執行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-ci.yml時，部署工作就算完成，剩下的就是編寫具體的job，而我們編寫好的job具體實現就得靠文章一開始所提到的Runner。

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

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

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

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

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