尤雨溪是如何做Vue.js自动化发布的？

本文是读者&＃64;NewName 投稿&＃xff0c;看了若川推荐的vuejs如何发布的源码&＃xff08;200余行&＃xff09;&＃xff0c;并成功写了一个小工具。推荐的当晚看到挺晚&＃xff0c;这执行力这努力程度超过很多人啊。

人类高质量前端祖师爷镇楼

前言&＃xff1a;第一次看源码&＃xff0c;感谢我川哥提供合适题材&＃xff0c;给予细心指导。感觉学习源码真的很有帮助&＃xff0c;我第一次就品尝到甜头了&＃xff0c;可以借鉴&＃xff08;抄袭&＃xff09;源码的思想解决实际的问题&＃xff0c;真好啊。本人着实菜鸟一枚&＃xff0c;也不会写作&＃xff0c;把学习的笔记记录一下而已。

1. 准备工作和主要精神

1.源码地址&＃xff1a;https://github1s.com/vuejs/vue-next/blob/HEAD/scripts/release.js

2.源码主旨内容&＃xff1a;vuejs 是如何发布

3.要思考学完了可以应用的地方&＃xff1a;

1.比如学完这个源码&＃xff0c;优化自己项目的发布流程 
————真有点想法耶&＃xff1a;
我们公司目前的前端发版本流程中有许多的git命令 &＃xff0c;这些git命令我可以用脚本的方式运行&＃xff0c;借鉴源码中的run方法&＃xff1a;
const run &＃61; (bin, args, opts &＃61; {}) &＃61;>execa(bin, args, { stdio: &＃39;inherit&＃39;, ...opts })
目前已经写了&＃xff08;CV&＃xff09;一个工具脚本&＃xff0c;优化了我们公司前端项目发预发布版本的流程&＃xff0c;详见第六部分。


4.读源码特别要注意&＃xff1a;

先看懂大局呀&＃xff5e; 主线是main函数  先看懂大概 然后不懂的再查


2. 从main函数开始看

将 main 函数中主要代码梳理一下&＃xff0c;总体流程如下图所示&＃xff1a;

2.1 版本号验证相关流程 &＃xff1a;40 - 77行

40行&＃xff1a;获取版本号

44 -49行 &＃xff1a;如果版本号不存在则问是要升级大版本、小版本、 补丁版本 还是自定义

52-59 行 &＃xff1a;如果用户选择的自定义则获取自定义的版本

65-67行&＃xff1a;检查版本号是否合法

69-73行&＃xff1a;问是否确定要发布版本

55-77: 如果选择否 main函数执行结束&＃xff0c; 返回

2.2 发布之前的测试&＃xff1a;80-86行

2.3 更新依赖的版本号&＃xff1a;88-90行

2.4 运行build命令 &＃xff1a;93-101行

2.5 运行日志命令 &＃xff1a;104行

2.6 提交代码&＃xff1a;106-113行

2.7 运行发布命令 &＃xff1a;115-119 行

2.8 新的版本push到git&＃xff1a;121-125行

2.9 提示跳过更新的包&＃xff1a;131-139行

3. 一些变量和函数的定义细节

3.1 发布之前测试&＃xff1a;

80-86行&＃xff1a;

//如果没有skipTests 跳过测试 并且没有 isDryRun&＃xff08;空跑&＃xff1f;&＃xff09;则运行测试
step(&＃39;\nRunning tests...&＃39;)if (!skipTests && !isDryRun) {//使用jest , 清除缓存await run(bin(&＃39;jest&＃39;), [&＃39;--clearCache&＃39;])//yarn test await run(&＃39;yarn&＃39;, [&＃39;test&＃39;, &＃39;--bail&＃39;])} else {console.log(&＃96;(skipped)&＃96;)}


3.2 构建所有的包

93—101行&＃xff1a;

//其实是运行yarn build 命令 
await run(&＃39;yarn&＃39;, [&＃39;build&＃39;, &＃39;--release&＃39;])


3.3 运行日志命令

104行&＃xff1a;运行 yarn 的log命令

await run(&＃96;yarn&＃96;, [&＃39;changelog&＃39;])
//changelog定义在package.json 的 npm scripts 中&＃xff1a;
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",//这里使用到了conventional-changelog,见第五部分&＃xff1a;使用的依赖


3.4 提交代码

106-113行&＃xff1a;git版本管理相关

//判断文件是否有变化&＃xff0c;如果有变化则提交到git
const { stdout } &＃61; await run(&＃39;git&＃39;, [&＃39;diff&＃39;], { stdio: &＃39;pipe&＃39; })if (stdout) {step(&＃39;\nCommitting changes...&＃39;)await runIfNotDry(&＃39;git&＃39;, [&＃39;add&＃39;, &＃39;-A&＃39;])await runIfNotDry(&＃39;git&＃39;, [&＃39;commit&＃39;, &＃39;-m&＃39;, &＃96;release: v${targetVersion}&＃96;])} else {console.log(&＃39;No changes to commit.&＃39;)}


3.5 运行发布命令

115-119行: 发布

// publish packagesstep(&＃39;\nPublishing packages...&＃39;)for (const pkg of packages) {await publishPackage(pkg, targetVersion, runIfNotDry)}
//publishPackage的定义在175-230行&＃xff1a;
async function publishPackage(pkgName, version, runIfNotDry) {// 如果某个包要跳过则直接返回if (skippedPackages.includes(pkgName)) {return}//获取路径和内容const pkgRoot &＃61; getPkgRoot(pkgName)const pkgPath &＃61; path.resolve(pkgRoot, &＃39;package.json&＃39;)const pkg &＃61; JSON.parse(fs.readFileSync(pkgPath, &＃39;utf-8&＃39;))//如果是私有的则返回if (pkg.private) {return}// For now, all 3.x packages except "vue" can be published as// &＃96;latest&＃96;, whereas "vue" will be published under the "next" tag.// 定义一下发布的标记 (打tag)let releaseTag &＃61; nullif (args.tag) {releaseTag &＃61; args.tag} else if (version.includes(&＃39;alpha&＃39;)) {releaseTag &＃61; &＃39;alpha&＃39;} else if (version.includes(&＃39;beta&＃39;)) {releaseTag &＃61; &＃39;beta&＃39;} else if (version.includes(&＃39;rc&＃39;)) {releaseTag &＃61; &＃39;rc&＃39;} else if (pkgName &＃61;&＃61;&＃61; &＃39;vue&＃39;) {// TODO remove when 3.x becomes defaultreleaseTag &＃61; &＃39;next&＃39;}// TODO use inferred release channel after official 3.0 release// const releaseTag &＃61; semver.prerelease(version)[0] || null// 执行发布&＃xff1a; 运行yarn的发布命令step(&＃96;Publishing ${pkgName}...&＃96;)try {await runIfNotDry(&＃39;yarn&＃39;,[&＃39;publish&＃39;,&＃39;--new-version&＃39;,version,...(releaseTag ? [&＃39;--tag&＃39;, releaseTag] : []),&＃39;--access&＃39;,&＃39;public&＃39;],{cwd: pkgRoot,stdio: &＃39;pipe&＃39;})console.log(chalk.green(&＃96;Successfully published ${pkgName}&＃64;${version}&＃96;))} catch (e) {if (e.stderr.match(/previously published/)) {console.log(chalk.red(&＃96;Skipping already published: ${pkgName}&＃96;))} else {throw e}}
}


3.6 更新依赖的细节

88-90: 更新所有的依赖

updateVersions(targetVersion)
//updateVersions 是定义的一个更新版本的函数&＃xff0c;里面调用了 updatePackage函数
function updateVersions(version) {// 1. update root package.jsonupdatePackage(path.resolve(__dirname, &＃39;..&＃39;), version)// 2. update all packagespackages.forEach(p &＃61;> updatePackage(getPkgRoot(p), version))
}
//packages的定义在第16行&＃xff1b;
//updatePackag在157行&＃xff1a;大概意思是找到路径下的package.json文件然后读取文件内容&＃xff0c;转成对象&＃xff0c;更新版本&＃xff0c;再写回文件。
function updatePackage(pkgRoot, version) {const pkgPath &＃61; path.resolve(pkgRoot, &＃39;package.json&＃39;)const pkg &＃61; JSON.parse(fs.readFileSync(pkgPath, &＃39;utf-8&＃39;))pkg.version &＃61; versionupdateDeps(pkg, &＃39;dependencies&＃39;, version)updateDeps(pkg, &＃39;peerDependencies&＃39;, version)fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) &＃43; &＃39;\n&＃39;)
}
//这里用到的updateDeps在 159-173行定义&＃xff1a;
function updateDeps(pkg, depType, version) {const deps &＃61; pkg[depType]if (!deps) returnObject.keys(deps).forEach(dep &＃61;> {//大概含义是检查依赖&＃xff0c;如果其中有vue则提示并且替换版本。if (dep &＃61;&＃61;&＃61; &＃39;vue&＃39; ||(dep.startsWith(&＃39;&＃64;vue&＃39;) && packages.includes(dep.replace(/^&＃64;vue\//, &＃39;&＃39;)))) {console.log(chalk.yellow(&＃96;${pkg.name} -> ${depType} -> ${dep}&＃64;${version}&＃96;))deps[dep] &＃61; version}})
}


4. 总体的流程总结回顾

将 main 函数中主要代码梳理一下&＃xff0c;总体流程如下图所示&＃xff1a;

5. 使用的依赖

5.1 minimist

const args &＃61; require(&＃39;minimist&＃39;)(process.argv.slice(2))


minimist轻量级的命令行参数解析引擎

https://blog.csdn.net/fangxuan1509/article/details/107469465

https://www.npmjs.com/package/minimist

5.2 chalk

const chalk &＃61; require(&＃39;chalk&＃39;)


chalk是一个颜色的插件

https://blog.csdn.net/sqrtsix/article/details/76615630

https://www.npmjs.com/package/chalk

5.3 semver

const semver &＃61; require(&＃39;semver&＃39;)


Semver是一个专门分析Semantic Version&＃xff08;语义化版本&＃xff09;的工具&＃xff0c;“semver”其实就是这两个单词的缩写。Npm使用了该工具来处理版本相关的工作。

语义化版本扫盲  https://segmentfault.com/a/1190000014405355

https://www.npmjs.cn/misc/semver/

5.4 enquirer

const { prompt } &＃61; require(&＃39;enquirer&＃39;)


命令行提示的&＃xff1f;

https://www.npmjs.com/package/enquirer

5.5 execa

const execa &＃61; require(&＃39;execa&＃39;)


execa是可以调用shell和本地外部程序的Javascript封装。会启动子进程执行。支持多操作系统&＃xff0c;包括windows。如果父进程退出&＃xff0c;则生成的全部子进程都被杀死。

http://abloz.com/tech/2018/08/21/nodejs-execa/

https://www.npmjs.com/package/execa

5.6 yarn的相关命令

https://yarn.bootcss.com/docs/getting-started/

5.7 conventional-changelog

在约定式提交的基础上来自动生成changelog

https://blog.csdn.net/weixin_34326179/article/details/91382865

https://www.npmjs.com/package/conventional-changelog

6. 应用&＃xff1a;优化发“预发布版本”的流程

6.1 问题描述

“预发布版本”是我们发正式版本之前的一个验证版本&＃xff0c;目前我们公司前端项目发“预发布版本”的时候要通过如下图所示的流程&＃xff0c;这里面有很多操作git的命令&＃xff0c;受阅读源码启发&＃xff0c;我想写一个工具脚本&＃xff0c;把这些命令变成自动执行的方式&＃xff0c;需要的信息只需要开发者输入或者选择即可。

其中生成tag的时候需要根据tag命名规范来生成。下图中 12 为固定值 &＃xff0c;20代表年份&＃xff0c;30代表是一年中的第几周&＃xff0c;01代表第几次发版。

6.2 解决方案

所以我需要写的脚本中就需要做这几件事情&＃xff1a;

&＃xff08;1&＃xff09;要获取当前年份&＃xff0c;当前第几周&＃xff1a;这两个值用JS基本代码就ok&＃xff0c;

&＃xff08;2&＃xff09;需要和开发者交互获取第几次发版和服务名&＃xff1a;可以使用 release.js 中使用的 依赖&＃xff1a;enquirer&＃xff1b;

&＃xff08;3&＃xff09;需要运行git命令&＃xff1a;release.js 中使用的 依赖&＃xff1a;execa&＃xff0c;以及定义的 run()方法。

&＃xff08;4&＃xff09;如果控制台中要高亮提示信息则使用依赖&＃xff1a;chalk &＃xff0c;当然这个是可选的

6.3 具体实现

6.3.1 首先项目根目录下新建scripts文件夹&＃xff0c;然后新建 release.js文件

6.3.2 安装依赖

npm install chalk --save-dev 
npm install execa --save-dev 
npm install enquirer --save-dev 


6.3.3 写代码

const chalk &＃61; require(&＃39;chalk&＃39;)
const execa &＃61; require(&＃39;execa&＃39;)
const {prompt
} &＃61; require(&＃39;enquirer&＃39;)const step &＃61; msg &＃61;> console.log(chalk.cyan(msg))const run &＃61; (bin, args, opts &＃61; {}) &＃61;>execa(bin, args, {stdio: &＃39;inherit&＃39;,...opts})async function main() {console.log(&＃39;欢迎使用发版小助手脚本&＃39;)step(&＃39;\n验证是否提交代码...&＃39;)const { yes } &＃61; await prompt({type: &＃39;confirm&＃39;,name: &＃39;yes&＃39;,message: &＃96;确定已经提交代码并将代码push到develop分支了吗?&＃96;})if (!yes) {return}// 切换到 develop 分支&＃xff0c;拉取最新代码await run(&＃39;git&＃39;, [&＃39;checkout&＃39;, &＃39;develop&＃39;])await run(&＃39;git&＃39;, [&＃39;pull&＃39;, &＃39;origin&＃39;, &＃39;develop&＃39;])// 切换到 release 分支&＃xff0c;拉取最新代码await run(&＃39;git&＃39;, [&＃39;checkout&＃39;, &＃39;release&＃39;])await run(&＃39;git&＃39;, [&＃39;pull&＃39;, &＃39;origin&＃39;, &＃39;release&＃39;])// 本地 release 分支合并 develop 分支代码await run(&＃39;git&＃39;, [&＃39;merge&＃39;, &＃39;develop&＃39;])// 合并完成后&＃xff0c;推送到远程 release 分支await run(&＃39;git&＃39;, [&＃39;push&＃39;, &＃39;origin&＃39;, &＃39;release&＃39;])// 以下逻辑为拼写tag号&＃xff0c;打tag用// 获取当前年份后两位const yearLastTwoBit &＃61; getLastTwoBitYear()console.log(yearLastTwoBit)// 获取当前是一年中的第几周const currentWeek &＃61; theWeek()console.log(currentWeek)// 本次的版本号const targetVersion &＃61; (await prompt({type: &＃39;input&＃39;,name: &＃39;version&＃39;,message: &＃39;这次是本周第几次发版&＃xff1f;&＃xff08;请输入数字&＃xff09;&＃39;,})).versionconsole.log(targetVersion)// 前端服务名字const serviceName &＃61; (await prompt({type: &＃39;input&＃39;,name: &＃39;serviceName&＃39;,message: &＃39;请输入这个前端服务名字&＃xff1f;&＃xff08;例如 fe_beg&＃xff09;&＃39;,})).serviceNameconsole.log(serviceName)// 拼接tag名 const tagName &＃61; &＃96;Cloud_R-12.${yearLastTwoBit}.${currentWeek}.${targetVersion > 10 ? targetVersion : &＃96;0${targetVersion}&＃96;}-${serviceName}&＃96;// 拼接注释const comment &＃61; &＃96;${serviceName}服务${currentWeek}周/迭代第${targetVersion}次版本发布&＃96;// 本地打 Tag&＃xff0c;生成版本await run(&＃39;git&＃39;, [&＃39;tag&＃39;, tagName, &＃39;-m&＃39;, comment])// 推送 Tag 到远程代码库&＃xff0c;触发构建await run(&＃39;git&＃39;, [&＃39;push&＃39;, &＃39;--tags&＃39;])console.log(&＃39;稍等片刻&＃xff0c;即可完成预发布环境版本发布&＃xff0c;详细查看Jenkins&＃39;)// 重新切换到develop分支await run(&＃39;git&＃39;, [&＃39;checkout&＃39;, &＃39;develop&＃39;])
}// 获取当前年份后两位
function getLastTwoBitYear() {const date &＃61; new Date()const currentYear &＃61; date.getFullYear().toString()return currentYear.substr(currentYear.length - 2, 2)
}function theWeek() {var totalDays &＃61; 0;now &＃61; new Date();var days &＃61; new Array(12);days[0] &＃61; 31;days[2] &＃61; 31;days[3] &＃61; 30;days[4] &＃61; 31;days[5] &＃61; 30;days[6] &＃61; 31;days[7] &＃61; 31;days[8] &＃61; 30;days[9] &＃61; 31;days[10] &＃61; 30;days[11] &＃61; 31;//判断是否为闰年&＃xff0c;针对2月的天数进行计算if (Math.round(now.getYear() / 4) &＃61;&＃61; now.getYear() / 4) {days[1] &＃61; 29} else {days[1] &＃61; 28}if (now.getMonth() &＃61;&＃61; 0) {totalDays &＃61; totalDays &＃43; now.getDate();} else {var curMonth &＃61; now.getMonth();for (var count &＃61; 1; count <&＃61; curMonth; count&＃43;&＃43;) {totalDays &＃61; totalDays &＃43; days[count - 1];}totalDays &＃61; totalDays &＃43; now.getDate();}//得到第几周var week &＃61; Math.round(totalDays / 7);return week;
}
main().catch(err &＃61;> {console.log(err)
})


6.3.4 然后在package.json 中增加一个npm script&＃xff1a;

"release": "node scripts/release.js",


6.3.5 测试

运行命令&＃xff1a;

npm run release  


下图为脚本运行效果&＃xff1a;

小工具脚本运行还算顺利&＃xff0c;只需要运行1次命令&＃xff0c;确认1次&＃xff0c;输入2次&＃xff0c;避免了输入很多git命令。还有就是发完“预发布”之后&＃xff0c;我们很容易忘了切回develop分支&＃xff0c;这个小工具脚本最后把代码切到了develop分支&＃xff0c;可以减少不必要的麻烦。

当然这里&＃xff0c;我没有考虑许多的异常case , 健壮性不太好&＃xff0c;有待优化。

最后我非常感谢川哥&＃xff0c;细心耐心给予我指导&＃xff0c;解答我的问题。川哥人好又心善&＃xff0c;勤勉又聪慧&＃xff0c;实在是我学习的楷模&＃xff5e;