小程序自动发版探索，两个优秀的第三方库该如何选择？且听我娓娓道来【玩转前端】

前情提要

目前的多端项目，在代码发布的时候，对于不同的端，需要进行不同的操作。尤其小程序端，每次都要在开发者工具中进行一次：

上传->填写版本信息->提交审核(确定上线时)

既然手动这么麻烦，能不能做成自动的？让开发节省重复操作时间，同时避免手动操作遗漏的可能性。

我翻阅资料，发现已经有大佬实现了上面的功能，我只需要站在巨人的肩膀上，结合实际需要，做些细微的调整即可。

功能计划

目前想要的功能比较简单，主要是自动化发版：

1、Taro打包后的小程序（原生小程序暂时不必要）

2、自动化版本发布、生成体验二维码

3、使用 git 昵称代替手工写入备注

第三方插件尝试

我找了两个功能各方面写的好且全面的插件，分别是Taro官方提供的 @tarojs/plugin-mini-ci 和 川哥写的 mini-ci

@tarojs/plugin-mini-ci

Taro 提供的这个插件接入很简单，官方文档写的很详细。

引入

因为我们目前只有微信小程序，所以里面只有关于微信小程序的配置。

安装

npm i @tarojs/plugin-mini-ci -D

本插件 Taro 3.x 版本均可使用，无需和其他 taro 包版本号保持一致；点击查看最新版本。

使用插件

/config/index.js文件中加入如下配置：

// 示例, 如果你使用 `vs code` 作为开发工具， 你还可以使用注释的语法引入插件包含的声明文件，可获得类似于typescript的友好提示
/**
 * @typedef { import("@tarojs/plugin-mini-ci").CIOptions } CIOptions
 * @type {CIOptions}
 */
const CIPluginOpt = {
  weapp: {
    appid: '微信小程序appid',
    privateKeyPath: '密钥文件相对项目根目录的相对路径，例如 key/private.appid.key',
  },
  // 版本号
  version: '1.0.0',
  // 版本发布描述
  desc: '版本描述',
}
const config = {
  plugins: [['@tarojs/plugin-mini-ci', CIPluginOpt]],
}

除了给插件传入对象， 你也可以传入一个异步函数，在编译时动态返回相关配置。

const CIPluginFn = async () => {
  // 可以在这里做一些异步事情， 比如请求接口获取配置
  /**
   * @typedef { import("@tarojs/plugin-mini-ci").CIOptions } CIOptions
   * @type {CIOptions}
   */
  return {
    weapp: {
      appid: '微信小程序appid',
      privateKeyPath: '密钥文件相对项目根目录的相对路径，例如 key/private.appid.key',
    },
    swan: {
      token: '鉴权需要的token令牌',
    },
    // 版本号
    version: '1.0.0',
    // 版本发布描述
    desc: '版本描述',
  }
}

const config = {
  plugins: [['@tarojs/plugin-mini-ci', CIPluginFn]],
}

作为选项配合 build 命令使用

package.json 的 scripts 字段使用命令参数

{
  "scripts": {
    //  构建完后自动 “打开开发者工具”
    "build:weapp": "taro build --type weapp --open",
    //  构建完后自动 “上传代码作为开发版并生成预览二维码”
    "build:weapp:preview": "taro build --type weapp --preview",
    //  构建完后自动“上传代码作为体验版”
    "build:weapp:upload": "taro build --type weapp --upload",
    //  构建完后自动“上传 dist/xxx 目录的代码作为体验版”， `--projectPath` 参数 适用于 taro 和 原生混合的场景
    "build:weapp:upload": "taro build --type weapp --upload --projectPath dist/xxx"
  },
  "taroConfig": {
    "version": "1.0.0",
    "desc": "上传描述"
  }
}

插件小结

优点：接入简单，基础功能完善，支持多类小程序。

缺点：无法满足一些定制化的需求，比如指定机器人。

推荐指数：四颗星，适合除了上传预览，无需额外需求的场景

mini-ci

川哥写的这个组件也很好用，Git仓库里有使用的详细介绍，这里也按照Git仓库提供的使用流程，详细配置一下。

引入

首次使用前需先执行 mini-ci init 配置 mini.config.js 配置（更推荐）

执行 mini-ci init 会把 miniConfig 的配置拷贝生成到当前小程序项目（或者新项目）中。

在当前小程序项目（或者新项目）的目录下配置 mini.config.js，这个优先于 .env

首次使用前需先执行 mini-ci init 配置 mini.config.js 配置（更推荐）
执行 mini-ci init 会把 miniConfig 的配置拷贝生成到当前小程序项目（或者新项目）中。

在当前小程序项目（或者新项目）的目录下配置 mini.config.js，这个优先于 .env

参考当前项目中的 mini.config.js

按照微信小程序文档配置小程序密钥等，这样就能上传和预览了。如果没有微信小程序，可以自行免费开通个人的微信小程序。

或者配置 .env
在当前小程序项目（或者新项目）的目录下配置 .env

参考当前项目中的 .env

configPath 配置
如果需要单选或者多选时，需配置 configPath。

或者配置 .env

在当前小程序项目（或者新项目）的目录下配置 .env

首次使用前需先执行 mini-ci init 配置 mini.config.js 配置（更推荐）
执行 mini-ci init 会把 miniConfig 的配置拷贝生成到当前小程序项目（或者新项目）中。

在当前小程序项目（或者新项目）的目录下配置 mini.config.js，这个优先于 .env

参考当前项目中的 mini.config.js

按照微信小程序文档配置小程序密钥等，这样就能上传和预览了。如果没有微信小程序，可以自行免费开通个人的微信小程序。

或者配置 .env
在当前小程序项目（或者新项目）的目录下配置 .env

参考当前项目中的 .env

configPath 配置
如果需要单选或者多选时，需配置 configPath。

configPath 配置

首次使用前需先执行 mini-ci init 配置 mini.config.js 配置（更推荐）
执行 mini-ci init 会把 miniConfig 的配置拷贝生成到当前小程序项目（或者新项目）中。

在当前小程序项目（或者新项目）的目录下配置 mini.config.js，这个优先于 .env

参考当前项目中的 mini.config.js

按照微信小程序文档配置小程序密钥等，这样就能上传和预览了。如果没有微信小程序，可以自行免费开通个人的微信小程序。

或者配置 .env
在当前小程序项目（或者新项目）的目录下配置 .env

参考当前项目中的 .env

configPath 配置
如果需要单选或者多选时，需配置 configPath。

功能定制

获取 Git 昵称

因为自动发版使用的是微信提供的机器人，所以，提交版本无法区分是谁。这种情况下，可以在自定义备注中加入提交人的信息。

而手动录入，是有可能出现遗漏的情况。如果能直接获取 Git 登录名，可以直接把昵称默认值放到备注里。

GitHub API

我之前文章有一篇是写获取 git 的标签的，所以我写获取昵称的时候，也是往那个思路靠的。但是没有成功。

后来，还是 VS 插件 Git History 给我的灵感。使用 Git 提供的 API,获取当前登录者的信息。

import axios from 'axios';
function getContributors(remoteUrl) {
  const remoteRepoPath = remoteUrl.replace(/.*?github.com(\/|:)/, '');
  const repoPath = remoteRepoPath.replace(/\.git\/?$/, '');
  const promise = axios.get(`https://api.github.com/repos/${repoPath}/contributors`);

  return promise
    .then(response => {
      return response.data;
    })
    .catch(() => {
      // Errors can be as follow
      // 403 - max API limit has been exceeded by the client
      // 404 - not found due to wrong path or its a private repository
      return [];
    });
}
getContributors('https://github.com/wxmp-project/wxmp-travel');

tips：

通常我找不到实现方案的时候，我就会去找有没有第三方插件有类似的功能，然后找到源码去看人家是怎么实现的。

像上面的功能，我也是找了很久没有找到实现方案。在 gitHistoryVSCode 源码中找到了实现方式。

GitLab API

同样的，GitLab也应该是有提供API的，我搜了一下果然有，官网地址 >>。

DevOps 发版小程序

我们使用的 DevOps 自动化运维平台，实现项目的部署。

自动化处理之前，不同端的部署，要在多个地方进行操作，H5的在DevOps 平台上进行发布操作，小程序在开发者工具里。

所以我修改了构建命令，加入了小程序发布的参数。

使用 jenkins 进行项目发布，可以在脚本中修改命令。因为我没有实际场景，所以没办法详细描述。需要的朋友可以检索一下。

总结

最终选择的 @tarojs/plugin-mini-ci，因为它已经满足我们的实际需求，且是同一个生态下的，接入成本低。

同时还做了功能定制，更加贴合实际业务需要。

作者：非职业「传道授业解惑」的开发者叶一一简介：「趣学前端」、「CSS畅想」系列作者，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。如果看完文章有所收获，欢迎点赞