宝贝儿,听说 npm 你还在手动发包?
本文涉及的技术:yml语法、changeset、git-action
背景
事情的是这样的,在我的仓库项目里有11 个npm包,后续可能还要增加,它们都需要定期发布到我们的 npm 私有仓库去。
而每次发包都需要在本地经历打包这个又臭又长的过程,全程需要 15分钟 左右,什么玩意儿?
为什么TMD这么久??代码5分钟,打包半小时?
关键我在打包的过程中还什么都不能做,只能等待它完成,这肯定是有问题的,所以我就开始找方案,能不能有个优化方案,让我只需要执行推送代码的步骤,就能实现自动发布?
技术调研
说干就干,首先我们整理出思维导图,在这个过程中我们具体需要经历哪些步骤:
我们可以看到,在提交代码之后的步骤,就是我们需要交给机器去做的部分,这部分也是占用最多时间的部分。也是我最头疼最想搞定的部分。
根据思维导图可以看到,开发完成之后我们有两个关键步骤:
- 生成变更日志、统一更改npm包版本
- 将其它任务交给 gitHook。不懂actions的同学可以去这先学习一下基本的api。
落地实践
第一步:生成日志
代码开发完成之后,我们需要记录一下我们做了哪些变更,这一步我们需要安装一个包管理器 changeset,然后执行:
pnpx changeset add
然后就会在对应的npm包根目录下的changelog.md 生成日志,major(大版本)、minor(小版本)、patch(补丁)。选择自己想要的。如下图:
第1.5步:打版本号
继续执行:
npx changeset version
这一步的作用是帮你自动更改所有npm包 package.json下的版本号。
第二步:配置 github的workflow脚本
看到这里我假设你知道关于yml的基本语法了。(乖,看不懂别硬看了👀)
在项目根目录创建 .github/workflows 文件夹,在文件夹内取一个以yml结尾的文件,比如 deploy.yml, 内容的话可以参考我下面的。(当然git-actions商店有很多成品脚本,你可以选择自己想要的,在原有的基础上更改)
直接上代码:
1 | name: nicecode flow // 脚本名称 |
我主要提示几个配置的重点:
- npm的token的获取,可以通过npm账号的 accessToken 页面获取(听说你在找我):
- gitAction token 则到github的token页获取 ,如果你的npm包没有文档类打包类的需求,这一部分可以不配置(戳我)
配置完之后,在github上的actions界面就可以看到执行中的脚本,大概长成下面这样:
如果你的脚本前面全是✔,恭喜你,成功生效了!
关于我
一个艺术家,非传统前端架构师,最近在学popping,喜欢自驾旅游,爱思考,爱生活。
宝贝儿,听说 npm 你还在手动发包?