微信小程序：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

安装依赖

javascript 复制代码

npm install miniprogram-ci --save

创建脚本文件

项目根目录下创建文件夹：miniprogram-ci（可自行更换）

新文件夹内新建 (名称可以自行更换)：

/miniprogram-ci/ci.js (脚本文件)
/miniprogram-ci/ci.key （小程序后台下载的key。可以不换名）

ci.js介绍

javascript 复制代码

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构建前需要先打包，读取里面的一些配置项和信息。

javascript 复制代码

{
	// ...
	"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",
  },
}

若是原生小程序框架写的：

javascript 复制代码

{
	// ...
	"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项目仓地址
环境和分支信息
打包命令

测试环境：

javascript 复制代码

npm install --registry http://registry.npm.taobao.org
npm run ci-build:test

生产环境：

javascript 复制代码

npm install --registry http://registry.npm.taobao.org
npm run ci-build

也可以本地电脑命令测试

效果显示

使用jekins比本地电脑稳定，且不关心打包过程中一直看守，更节省时间。如果没有jekins那就本地打包也一样，整个过程都不需要打开【微信开发者工具】。