React Native項目自動化打包發佈

時間 2019-11-24

原文原文鏈接

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

涉及到的工具

相關概念

1.GitLab CI是 GitLab 提供的持續集成服務，只要在你的倉庫根目錄建立一個.gitlab-ci.yml 文件，併爲該項目指派一個Runner，當有合併請求或者 push的時候就會觸發build。這個.gitlab-ci.yml 文件定義GitLab runner要作哪些操做。默認有3個[stages(階段)]: build、test、deploy。更詳細的能夠查看官方文檔vue

2.GitLab-Runner是配合GitLab-CI進行使用的。通常地，GitLab裏面的每個工程都會定義一個屬於這個工程的軟件集成腳本，用來自動化地完成一些軟件集成工做。當這個工程的倉庫代碼發生變更時，好比有人push了代碼，GitLab就會將這個變更通知GitLab-CI。這時GitLab-CI會找出與這個工程相關聯的Runner，並通知這些Runner把代碼更新到本地並執行預約義好的執行腳本。node

因此，GitLab-Runner就是一個用來執行軟件集成腳本的東西。你能夠想象一下：Runner就像一個個的工人，而GitLab-CI就是這些工人的一個管理中心，全部工人都要在GitLab-CI裏面登記註冊，而且代表本身是爲哪一個工程服務的。當相應的工程發生變化時，GitLab-CI就會通知相應的工人執行軟件集成腳本。以下圖所示：react

3.Pipelines是定義於.gitlab-ci.yml中的不一樣階段的不一樣任務。我把Pipelines理解爲流水線，流水線包含有多個階段（stages），每一個階段包含有一個或多個工序（jobs），好比先購料、組裝、測試、包裝再上線銷售，每一次push或者MR都要通過流水線以後才能夠合格出廠。而.gitlab-ci.yml正是定義了這條流水線有哪些階段，每一個階段要作什麼事android

編寫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.shwebpack

編寫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代碼ios

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可參照。git

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

設置淘寶鏡像源
安裝依賴
執行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(" ")
}
複製代碼