本文涉及的技术: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商店有很多成品脚本,你可以选择自己想要的,在原有的基础上更改)
直接上代码:
name: nicecode flow // 脚本名称
on:
push:
branches: ['main'] // 监听哪个分支
permissions:
contents: read
pages: write
id-token: write
jobs:
publish-npm:
runs-on: ubuntu-latest // 运行服务器环境
steps:
- uses: actions/checkout@v4 // 需要的依赖镜像
- uses: actions/setup-node@v3
with:
node-version: 20
registry-url: https://registry.npmjs.org
- name: Setup pnpm // 安装 pnpm 依赖
uses: pnpm/action-setup@v3
with:
version: 8
- run: pnpm install // 安装项目依赖
- run: pnpm run npm:build // 打包npm包
- run: pnpm run pub // 发布npm包
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}} // 给于npm包的发布权限
- name: docs-build // // 打包文档,如果你没有对应的文档,这里可以跳过不配置
run: pnpm run docs:build
- name: docs-deploy
uses: peaceiris/actions-gh-pages@v3 // 发布文档
with:
github_token: ${{ secrets.ACTION_SECRET }} // 给于仓库推送代码到 gh-page 分支的权限
publish_dir: ./docs-dist
我主要提示几个配置的重点:
- npm的token的获取,可以通过npm账号的 accessToken 页面获取(听说你在找我):
- gitAction token 则到github的token页获取 ,如果你的npm包没有文档类打包类的需求,这一部分可以不配置(戳我)
配置完之后,在github上的actions界面就可以看到执行中的脚本,大概长成下面这样:
如果你的脚本前面全是✔,恭喜你,成功生效了!
关于我
一个艺术家,非传统前端架构师,最近在学popping,喜欢自驾旅游,爱思考,爱生活。
生命很短,做你想做的。 - dev