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就会通知相应的工人执行软件集成脚本。以下图所示：

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
每日更新前端技术