本文参加了由公众号@若川视野 发起的每周源码共读活动, 点击了解详情一起参与。
学习准备工作
阅读相关学习资料:
1 | ruby复制代码微信小程序CI :https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html |
clone源码:
源码路径如下:
1 | bash复制代码https://github.com/NervJS/taro/tree/next/packages/taro-plugin-mini-ci |
我是把taro整个clone下来的。
源码学习
小程序CI的整体流程
首先看index.js:
1 | java复制代码module.exports = require('./dist/index.js').default |
含义是引入dist文件夹下的index.js文件, 但是刚克隆下来的代码中并没有dist文件夹。很容易想到dist文件夹是打包后产生的,所以执行命令:
1 | arduino复制代码npm i |
注意是在taro/packages/taro-plugin-mini-ci目录下执行 install和build命令:
build之后可以看到有了dist文件夹:
对应目录下也生成了index.js文件,生成的js文件和原来的ts文件也没差太多,再加上最近再自学ts,就看index.ts吧(代码有删减):
1 | javascript复制代码import { IPluginContext } from '@tarojs/service' |
代码的整体流程比较简单,判断平台,创建CI实例, 执行对应的CI。
可以在启动Node.js 程序时直接指定命令行参数,例如:
1 | ini复制代码node index.js --beep=boop -t -z 12 -n5 foo bar |
Node.js 程序启动后可以直接从process.argv中读取到参数列表:
1 | javascript复制代码console.log(process.argv); |
从上述代码中可以看到,process.argv 变量是一个数组,数组前两项分别是 node 程序位置和js脚本位置,数组中随后的元素都是我们启动Node.js后的参数,这些参数以空格分隔成数组。
而minimist 是一个专门用于处理Node.js启动参数的库,可以将 process.argv 中的参数列表转换成更加易于使用的格式:
1 | javascript复制代码const argv = require('minimist')(process.argv.slice(2)); |
具体使用可以参考www.npmjs.com/package/min…, 使用的时候接收参数和配置对象。
CI抽象类:BaseCI
packages/taro-plugin-mini-ci/src/BaseCi.ts(代码有删减):
1 | javascript复制代码import { IPluginContext } from '@tarojs/service' |
在抽象类中定义了一些属性是protected的,意味着可以在本类以及子类中访问;在constructor中对属性进行了初始化,并调用初始化函数。然后是定义了一些CI操作的抽象方法。
CI子类:AlipayCI
packages/taro-plugin-mini-ci/src/AlipayCI.ts
1 | javascript复制代码/* eslint-disable no-console */ |
支付宝小程序子类的_init()方法主要做参数的验证和设置;open,upload,preview实现了抽象类定义的方法,分别用于打开开发者工具,上传代码,预览二维码。核心功能的实现依赖于miniu。可以查看相应的资料。
这篇文章介绍了使用MiniU完成CI/CD: forum.alipay.com/mini-app/po…。
生成二维码调用了generateQrCode方法:
1 | javascript复制代码 /** |
generateQrCode实际上是通过三方包qrcode-terminal来实现的。
CI子类:SwanCI
在SwanCI类中open方法和preview方法的实现与AlipayCI一样,upload实现有所不同:
1 | javascript复制代码async upload () { |
上传的时候执行shell脚本,通过shelljs来实现的 。
CI子类:WeappCI
WeappCI主要是使用了miniprogram-ci ,具体看一下open, upload, preview方法:
open方法(代码有删减):
1 | javascript复制代码import * as cp from 'child_process' |
open方法用于打开开发者工具,通过node.js child_process的exec执行命令。
upload方法:
1 | javascript复制代码import * as ci from 'miniprogram-ci' |
上传代码的方法使用miniprogram-ci的upload方法,得到结果信息后根据分包信息来提示整体包大小和主包大小。
preview方法(代码有删减):
1 | javascript复制代码async preview () { |
preview方法使用的是miniprogram-ci的preview方法, 得到结果信息后根据分包信息来提示整体包大小和主包大小。
CI子类:TTCI
TTCI使用tt-ide-cli来完成预览和上传,使用child_process的exec来完成打开开发者工具的功能。
open(代码有删除):
1 | javascript复制代码open () { |
这里open方法也是通过node.js child_process的exec执行命令。
upload(代码有删除):
1 | javascript复制代码import * as tt from 'tt-ide-cli' |
上传代码使用tt-ide-cli的upload方法。
preview(代码有删除):
1 | javascript复制代码import * as tt from 'tt-ide-cli' |
生成预览二维码使用了tt-ide-cli的upload方法。
总结
1.taro小程序ci的核心代码逻辑是:判断平台,创建CI实例, 执行对应的CI。
2.不同平台对应不同的CI类,但都继承了基础的CI抽象类,实现了抽象类声明的open,upload和preview方法。
3.实现具体的open,upload和preview方法时根据对应小程序是否提供了命令行工具,有用到miniu,tt-ide-cli,miniprogram-ci,还有的使用shellj,qrcode-terminal,以及child_process来执行命令。
本文转载自: 掘金