微信小程序：miniprogram-ci自动打包工具使用介绍以及支持配置环境变量、jekins打包、taro、uni-app三方工具
背景介绍
一直都是本地电脑运行微信开发者工具打包上传。多项目中新老版本对node版本要求不一致，老是切来切去。而且同一个人开发上传需要打包生产环境，发布后继续打包测试环境顶替回去。若需要审核失败、中途加东西重新发版很耽搁时间。
本文是依据：taro + ci + jekins 模式上传（原生的大同小异，区别很小），机器人1只发布生产环境，机器人2只发布测试环境。
概述
miniprogram-ci 是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。
开发者可不打开小程序开发者工具，独立使用 miniprogram-ci 进行小程序代码的上传、预览等操作
官方文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html
功能
miniprogram-ci 目前提供以下能力：
- 上传代码，对应小程序开发者工具的上传【本文】
- 预览代码，对应小程序开发者工具的预览
- 构建 npm，对应小程序开发者工具的: 菜单-工具-构建npm
- 上传云开发云函数代码，对应小程序开发者工具的上传云函数能力
- 上传云托管代码，对应小程序开发者工具的上传云托管能力
- 上传云存储/静态托管文件，对应小程序开发者工具-云开发-云存储和静态托管文件管理
- 代理，配置 miniprogram-ci 的网络请求代理方式
- 支持获取最近上传版本的 sourceMap
- 支持 node 脚本调用方式和 命令行 调用方式
密钥及 IP 白名单配置
使用 miniprogram-ci 前应访问"微信公众平台-开发-开发设置"后下载代码上传密钥，并配置 IP 白名单 开发者可选择打开 IP 白名单，打开后只有白名单中的 IP 才能调用相关接口
ip地址填写，当你不知道时候
cmd命令行跑下：curl ifconfig.me 上面显示的ip就是访问设备所在的ip地址
也可以直接浏览器打开 https://ifconfig.me
安装依赖
npm install miniprogram-ci --save
创建脚本文件
项目根目录下创建文件夹：miniprogram-ci（可自行更换）
新文件夹内新建 (名称可以自行更换)：
- /miniprogram-ci/ci.js (脚本文件)
- /miniprogram-ci/ci.key （小程序后台下载的key。可以不换名）
ci.js介绍
const ci = require('miniprogram-ci');
const path = require('path');
const config = require('../project.config.json');
const package = require('../package.json');
const project = new ci.Project({ // 详见官方文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html#%E9%A1%B9%E7%9B%AE%E5%AF%B9%E8%B1%A1
appid: config.appid, // 小程序appid
type: 'miniProgram',
projectPath: process.cwd(), // 项目地址
privateKeyPath: path.join(process.cwd(), `/miniprogram-ci/ci.key`), // key文件地址
ignores: ['node_modules/**/*'], // 忽略上传文件
});
(async () => {
try {
// 构建版本号和描述
const version = package.version;
const desc = `运行环境：${process.env.NODE_ENV || 'test'}`;
// 打印执行上传操作
console.log('开始上传...');
console.log('上传版本号:', version);
console.log('上传描述:', desc);
const uploadResult = await ci.upload({
project,
version,
desc,
setting: { // 详见官方文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html#%E7%BC%96%E8%AF%91%E8%AE%BE%E7%BD%AE
es6: true,
minify: true,
autoPrefixWXSS: true,
},
robot: process.env.CI_ROBOT_ID,
onProgressUpdate: console.log,
});
console.log('上传结果:', uploadResult);
process.exit();
} catch (error) {
console.error('上传失败:', error);
process.exit(1);
}
})();
package.json介绍
脚本参数说明：
【cross-env NODE_ENV=xxxx】定义项目的全局变量，如果是vite或者其他方式大同小异。也有的公司直接暴力注释切换接口地址前缀
【cross-env CI_ROBOT_ID=xxxx】定义执行的机器人id。如：生产环境用机器人1，测试环境使用机器人2，方便快速切换体验版本
有兴趣可以查看：
-
React自定义环境变量node、cross-env、webpack等方式不同环境配置命令整理
https://blog.csdn.net/weixin_44461275/article/details/122988359 -
vue、react、uniapp配置全局域名、环境变量NODE_ENV、–mode区分开发环境和正式环境https://blog.csdn.net/weixin_44461275/article/details/122325488
若是taro、uni-app这种框架：
因为【project.config.json】配置项一般入口地址配置的是【“miniprogramRoot”: “dist/”】所以，ci构建前需要先打包，读取里面的一些配置项和信息。
{
// ...
"scripts": {
"ci-build": "npm run build && cross-env NODE_ENV=production CI_ROBOT_ID=1 node ./miniprogram-ci/ci.js",
"ci-build:test": "npm run build-test && cross-env CI_ROBOT_ID=2 node ./miniprogram-ci/ci.js",
"build": "cross-env NODE_ENV=production taro build --type weapp",
"build-test": "cross-env NODE_ENV=test taro build --type weapp",
},
}
若是原生小程序框架写的：
{
// ...
"scripts": {
"ci-build": "cross-env NODE_ENV=production CI_ROBOT_ID=1 node ./miniprogram-ci/ci.js",
"ci-build:test": "cross-env CI_ROBOT_ID=2 node ./miniprogram-ci/ci.js",
},
}
运维配置jekins打包配置项
提供给运维这些信息即可
- git项目仓地址
- 环境和分支信息
- 打包命令
测试环境：
npm install --registry http://registry.npm.taobao.org
npm run ci-build:test
生产环境：
npm install --registry http://registry.npm.taobao.org
npm run ci-build
也可以本地电脑命令测试
效果显示
使用jekins比本地电脑稳定，且不关心打包过程中一直看守，更节省时间。如果没有jekins那就本地打包也一样，整个过程都不需要打开【微信开发者工具】。
