还在用开发者工具上传小程序? 快来试试 miniprogram-ci 提 ...

1. 前言

大师好，我是若川。为了能帮助到更多对源码感爱好、想学会看源码、提升自己前端技术才能的同学。我倾力延续构造了一年每周大师一路进修200行左右的源码共读活动，感爱好的可以点此扫码加我微信 ruochuan12 介入。

想学源码，死力保举关注我写的专栏（今朝3K+人关注）《进修源码整体架构系列》 包括jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue 3.2 公布、vue-this、create-vue、玩具vite等20余篇源码文章。
2. 前情回首

本文提到的工具已开源，可以间接克隆拿去用，也可以自行点窜利用，https://github.com/lxchuan12/mp-cli.git，求个star^_^
估量有很多开辟小法式的同学，还在利用微信开辟者工具上传小法式。假如你是，那末这篇文章很是合适你。假如不是，一样也很合适你。
早在 2021年08月，我写过一篇文章 Vue 3.2 公布了，那尤雨溪是怎样公布 Vue.js 的？
Vue 2.7 若何公布跟Vue 3.2这篇文章类似，所以就不赘述了。

vuejs公布的文件很多代码我们可以间接复制粘贴点窜，优化我们自己公布的流程。比如写小法式，相对能够公布频仍，完全可以利用这套代码，配合miniprogram-ci，再加上一些自界说，加以优化。

因现在天我们来开辟这样的脚手架工具。
看完本文，你将学到：

1. 1. 若何操纵 release-it 提升版本号，自动打 tag，天生 changelog 等
2. 2. npm init 道理
3. 3. 若何写一个脚手架工具
4.     - 若何剖析 Nodejs 号令行参数 minimist
5.     - 若何挑选单选、多选 enquirer(prompt, MultiSelect)
6.     - 等等

复制代码

先看看终极开辟的结果。
支持的功用



显现帮助信息



上传结果



3. 关于为啥要开辟这样的工具

关于小法式 ci 上传，再分享两篇文章。
基于 CI 实现微信小法式的延续构建
小打卡小法式自动化构建及公布的工程化理论 虽然文章里不是最新的 miniprogram-ci，但这篇场景写得比力周全。

接着，我们先来看看 miniprogram-ci 官方文档。
4. miniprogram-ci 官方文档

miniprogram-ci 文档
4.1 上传

1. const ci = require('miniprogram-ci')
2. ;(async () => {
3.   const project = new ci.Project({
4.     appid: 'wxsomeappid',
5.     type: 'miniProgram',
6.     projectPath: 'the/project/path',
7.     privateKeyPath: 'the/path/to/privatekey',
8.     ignores: ['node_modules/**/*'],
9.   })
10.   const uploadResult = await ci.upload({
11.     project,
12.     version: '1.1.1',
13.     desc: 'hello',
14.     setting: {
15.       es6: true,
16.     },
17.     onProgressUpdate: console.log,
18.   })
19.   console.log(uploadResult)
20. })()

复制代码

4.2 预览

1. const ci = require('miniprogram-ci')
2. ;(async () => {
3.   const project = new ci.Project({
4.     appid: 'wxsomeappid',
5.     type: 'miniProgram',
6.     projectPath: 'the/project/path',
7.     privateKeyPath: 'the/path/to/privatekey',
8.     ignores: ['node_modules/**/*'],
9.   })
10.   const previewResult = await ci.preview({
11.     project,
12.     desc: 'hello', // 此备注将显现在“小法式助手”开辟版列表中
13.     setting: {
14.       es6: true,
15.     },
16.     qrcodeFormat: 'image',
17.     qrcodeOutputDest: '/path/to/qrcode/file/destination.jpg',
18.     onProgressUpdate: console.log,
19.     // pagePath: 'pages/index/index', // 预览页面
20.     // searchQuery: 'a=1&b=2',  // 预览参数 [留意!]这里的`&`字符在号令行中应写成转义字符`\&`
21.   })
22.   console.log(previewResult)
23. })()

复制代码

5. Taro 小法式插件 @tarojs/plugin-mini-ci

假如利用 Taro 开辟的小法式，可以间接利用。
具体若何利用参考文档，我在本文中就不赘述了。
小法式延续集成 @tarojs/plugin-mini-ci
我构造的源码共读第30期读的就是这个插件，很是值得进修。@tarojs/plugin-mini-ci 源码解读可以参考 @NewName 的源码文章
我体验下来的感受有以下几点可以优化。

• 不支持指定机械人
  
• 不支持不打包时上传
  
• 不支持官方供给的更多设置
  
• 不支持挑选多个小法式批量上传等等
  

倘使偶然候我能够给 Taro 提 PR，固然纷歧定会被合并。
6. uni-app 似乎没有供给类似的插件

uni-app 似乎没有供给类似的插件。需要自己脱手，人给家足。
7. release-it 自动提升版本、打 tag、天生 changelog 等

因而我们自己脱手，人给家足，写一个工具处理上面提到的题目，支持 Taro 打包后的小法式和 uni-app 打包后的，还有原生小法式上传和预览。
开辟小工具之前，先先容一些好用的工具。
听说很多小伙伴的项目，没有打 tag、没有版本的概念，没有天生 changelog，没有设置 eslint、prettier，没有 commit 等标准。
这些实在不难，commit 标准一般简单做法是安装 npm i git-cz -D， 在package.json 中加入以下剧本。

1. {
2.     "scripts": {
3.         "commit": "git-cz"
4.     }
5. }

复制代码

git 提交时利用 npm run commit 即可，其他就不赘述了。
release-it，自动提升版本号，自动打 tag，天生 changelog 等
release-it 官网仓库

1. npm init release-it
2. # 挑选 .release-it.json 用下面的设置，复制粘贴到 .release-it.json 中。
3. # 再安装 changelog 插件
4. npm i @release-it/conventional-changelog -D
5. {
6.   "github": {
7.     "release": false
8.   },
9.   "git": {
10.     "commitMessage": "release: v${version}"
11.   },
12.   "npm": {
13.     "publish": false
14.   },
15.   "hooks": {
16.     "after:bump": "echo 更新版本成功"
17.   },
18.   "plugins": {
19.     "@release-it/conventional-changelog": {
20.       "preset": "angular",
21.       "infile": "CHANGELOG.md"
22.     }
23.   }
24. }

复制代码

这样设置后，可以 npm run release 履行 release-it 版本。 还支持 hooks 钩子，比如提升版本号后"after:bump": "echo 更新版本成功"，更多功用可以检察release-it 官网仓库。
7.1 npm init release-it 道理

为啥 npm init 也可以间接初始化一个项目，带着疑问，我们翻看 npm 文档。
npm init
npm init 用法：

1. npm init [--force|-f|--yes|-y|--scope]
2. npm init <@scope> (same as `npx <@scope>/create`)
3. npm init [<@scope>/]<name> (same as `npx [<@scope>/]create-<name>`)

复制代码

npm init <initializer> 时转换成 npx 号令：

1. npm init foo -> npx create-foo
2. npm init @usr/foo -> npx @usr/create-foo
3. npm init @usr -> npx @usr/create

复制代码

看完文档，我们也就了解了：
运转 npm init release-it => 相当于 npx create-release-it
create-release-it
npm init release-it 道理实在就是 npx create-release-it  挑选一些设置，天生 .release-it.json 大概 package.json 的 release-it 设置。
再写入号令release 设置到 package.json。

1. {
2.   "scripts": {
3.     "release": "release-it"
4.   }
5. }

复制代码

最初履行 npm install release-it --save-dev 也就是源码里的 await execa('npm', ['install', 'release-it', '--save-dev'], { stdio: 'inherit' });。
这行源码位置
8. 小法式上传工具实现支流程

需要支持多选，那必定得遍历数组。

1. // 代码只是关键代码，完整的可以检察 https://github.com/lxchuan12/mp-cli/blob/main/src/index.js
2. (async () => {
3.     for (const mpConfigItem of mpConfigList) {
4.         try {
5.             const res = await main({});
6.         }
7.         catch(err){
8.             console.log('履行失利', err);
9.         }
10.     }
11. })();

复制代码

main 函数

1. const { green, bold } = require('kolorist');
2. const step = (msg) => console.log(bold(green(`[step] ${msg}`)));
3. async function main(options = {}) {
4.     const project = new ci.Project(lastProjectOptions);
5.     if (upload) {
6.         step('起头上传小法式...');
7.         const uploadResult = await ci.upload(lastUploadOptions);
8.         console.log('uploadResult', uploadResult);
9.     }
10.     if (preview) {
11.         step('起头天生预览二维码...');
12.         const previewResult = await ci.preview(lastPreviewOptions);
13.         console.log('previewResult', previewResult);
14.     }
15. }

复制代码

8.1 增加功用支持指定参数

利用 minimist 剖析号令行参数。

1. const getParams = () => {
2.     const params = process.argv.slice(2);
3.     const paramsDefault = {
4.         default: {
5.             robot: 1,
6.             preview: false,
7.             upload: false,
8.             // 空跑，不履行
9.             dry: false,
10.             // 按照设置，单选还是多选来上传小法式
11.             useSelect: false,
12.             useMultiSelect: false,
13.             help: false,
14.             version: false,
15.         },
16.         alias: {
17.             u: 'upload',
18.             r: 'robot',
19.             v: 'version',
20.             d: 'dry',
21.             s: 'useSelect',
22.             m: 'useMultiSelect',
23.             p: 'preview',
24.             h: 'help',
25.         }
26.     };
27.     return require('minimist')(params, paramsDefault);
28. };
30. module.exports = {
31.     getParams,
32. };

复制代码

8.2 支持读取项目标 package.json 的 version，也支持读取自界说version

kolorist 色彩输出。

1. const { red, bold } = require('kolorist');
2. const getVersion = () => {
3.     let version;
4.     try {
5.         version = require(`${packageJsonPath}/package.json`).version;
6.     } catch (e) {
7.         console.log(e);
8.         console.log(
9.             red(
10.                 bold(
11.                     '未设备 version , 而且未设备 package.json 途径，没法读取 version',
12.                 ),
13.             ),
14.         );
15.     }
16.     return version;
17. };
19. module.exports = {
20.     getVersion,
21. };

复制代码

8.3 版本描写 支持指定 git commit hash 和作者

git rev-parse --short HEAD 读取 git 仓库比来一次的 commit hash。
parse-git-config 可以读取 .git/config 设置。

1. // const path = require('path');
2. const { execSync } = require('child_process');
3. const parseGitConfig = require('parse-git-config');
4. const getDesc = (projectPath, version) => {
5.     // 获得最新 git 记录 7位的 commit hash
6.     let gitCommitHash = 'git commit hash 为空';
7.     try {
8.         gitCommitHash = execSync('git rev-parse --short HEAD', {
9.             cwd: projectPath,
10.         })
11.             .toString()
12.             .trim();
13.     } catch (e) {
14.         console.warn('获得 git commit hash 失利');
15.         console.warn(e);
16.     }
18.     // 获得项目标git仓库的 user.name
19.     let userName = '默许';
20.     try {
21.         const {
22.             user: { name = '默许' },
23.         } = parseGitConfig.sync({
24.             cwd: projectPath,
25.             path: '.git/config',
26.         });
27.         userName = name;
28.     } catch (e) {
29.         console.warn('获得 .git/config user.name 失利');
30.         console.warn(e);
31.     }
33.     const desc = `v${version} - ${gitCommitHash} - by@${userName}`;
34.     return desc;
35. };
37. module.exports = getDesc;

复制代码

8.4 读取设置 wx.config.js 设置（更保举）

当前也支持读取 .env 设置。读取 .env 设置，可以采用 dotenv。关于 dotenv的道理，可以看我之前写过的文章口试官：项目中常用的 .env 文件道理是什么？若何实现？
但 wx.config.js 可以设置更多工具而且更灵活。所以更保举。
感爱好的可以研讨 vue-cli 是若何读取 vue.config.js 设置的。围绕工作相关的进修，常常收益更大。

1. // 读取 wx.config.js 设置
2. const loadWxconfig = (cwd) => {
3.     try {
4.         return require(path.join(cwd, 'wx.config.js'));
5.     } catch (e) {
6.         return {
7.             error: '未设置 wx.config.js 文件',
8.         };
9.     }
10. };
12. const parseEnv = () => {
13.     const cwd = process.cwd();
15.     let parsed = {};
16.     let wxconfig = loadWxconfig(cwd);
17.     if (wxconfig.error) {
18.         let dotenvResult = require('dotenv').config({
19.             path: path.join(cwd, './.env'),
20.         });
22.         parsed = dotenvResult.parsed;
23.         if (dotenvResult.error) {
24.             throw error;
25.         }
26.     } else {
27.         parsed = wxconfig;
28.     }
29.   // 代码有省略
30. }

复制代码

8.5 支持挑选多个小法式

我们可以用 enquirer 来实现单选大概多选的功用。以下只是关键代码。 完整代码可以检察 mp-cli/src/utils/getConfig.js 文件。

1. // 只是关键代码
2. const { prompt, MultiSelect } = require('enquirer');
3. const configPathList = fs.readdirSync(configPath);
4. const configPathListJson = configPathList.map((el) => {
5.     return require(`${configPath}/${el}`);
6. });
7. const { name } = await prompt({
8.     type: 'select',
9.     name: 'name',
10.     message: '请挑选一个小法式设置',
11.     choices: configPathListJson,
12. });
13. result = configPathListJson.filter((el) => el.name === name);
14. return result;

复制代码

8.6 支持多个批量上传

1. // 只是关键代码
2. const { prompt, MultiSelect } = require('enquirer');
3. const configPathList = fs.readdirSync(configPath);
4. const configPathListJson = configPathList.map((el) => {
5.     return require(`${configPath}/${el}`);
6. });
7. const multiSelectPrompt = new MultiSelect({
8.     name: 'value',
9.     message: '可挑选多个小法式设置',
10.     limit: 7,
11.     choices: configPathListJson,
12. });
14. try {
15.     const answer = await multiSelectPrompt.run();
16.     console.log('Answer:', answer);
17.     result = configPathListJson.filter((el) =>
18.         answer.includes(el.name),
19.     );
20.     return result;
21. } catch (err) {
22.     console.log('您已经取消');
23.     console.log(err);
24.     process.exit(1);
25. }

复制代码

后续能够接入 CI/CD、接入邮件提醒、接入钉钉、支持可视化操纵等等
8.7 更多若何利用可以参考文档

1. # 克隆我写的 mp-cli 工具
2. git clone https://github.com/lxchuan12/mp-cli.git
3. # 克隆腾讯开源的电商小法式
4. git clone https://github.com/lxchuan12/tdesign-miniprogram-starter-retail.git
5. # 切到分支 feature/release-it
6. git checkout feature/release-it

复制代码

可以克隆我的项目，到一个目录中，比如 projects 中。
再克隆我的别的一个小法式（腾讯开源的电商小法式），到同一个目录中。比如 projects 中。
依照微信小法式文档设置小法式密钥等，这样就能上传和预览了。假如没有微信小法式，可以自行免费开通小我的微信小法式。
9. 总结

经过本文的进修，我们晓得了以下常识。

1. 1. 若何操纵 release-it 提升版本号，自动打 tag，天生 changelog 等
2. 2. npm init 道理
3. 3. 若何写一个脚手架工具
4.     - 若何剖析 Nodejs 号令行参数 minimist
5.     - 若何挑选单选、多选 enquirer(prompt, MultiSelect)
6.     - 等等

复制代码

我相信大师也可以自己脱手实现公司类似要求的脚手架工具，削减发版时候，降本提效。
<hr/>最初可以延续关注我@若川。接待点此扫码加我微信 ruochuan12 交换，加入每周大师一路进修200行左右的源码共读活动，配合进步。