宝贝儿,听说 npm 你还在手动发包?

本文涉及的技术:yml语法、changeset、git-action

背景

事情的是这样的,在我的仓库项目里有11 个npm包,后续可能还要增加,它们都需要定期发布到我们的 npm 私有仓库去。

image.png

而每次发包都需要在本地经历打包这个又臭又长的过程,全程需要 15分钟 左右,什么玩意儿?
image.png
为什么TMD这么久??代码5分钟,打包半小时?

关键我在打包的过程中还什么都不能做,只能等待它完成,这肯定是有问题的,所以我就开始找方案,能不能有个优化方案,让我只需要执行推送代码的步骤,就能实现自动发布?

技术调研

说干就干,首先我们整理出思维导图,在这个过程中我们具体需要经历哪些步骤:

image.png

我们可以看到,在提交代码之后的步骤,就是我们需要交给机器去做的部分,这部分也是占用最多时间的部分。也是我最头疼最想搞定的部分。

根据思维导图可以看到,开发完成之后我们有两个关键步骤:

  1. 生成变更日志、统一更改npm包版本
  2. 将其它任务交给 gitHook。不懂actions的同学可以去这先学习一下基本的api。

落地实践

第一步:生成日志

代码开发完成之后,我们需要记录一下我们做了哪些变更,这一步我们需要安装一个包管理器 changeset,然后执行:

pnpx changeset add

changest.gif

然后就会在对应的npm包根目录下的changelog.md 生成日志,major(大版本)、minor(小版本)、patch(补丁)。选择自己想要的。如下图:

image.png

第1.5步:打版本号

继续执行:

npx changeset version

这一步的作用是帮你自动更改所有npm包 package.json下的版本号

第二步:配置 github的workflow脚本

看到这里我假设你知道关于yml的基本语法了。(乖,看不懂别硬看了👀)

在项目根目录创建 .github/workflows 文件夹,在文件夹内取一个以yml结尾的文件,比如 deploy.yml, 内容的话可以参考我下面的。(当然git-actions商店有很多成品脚本,你可以选择自己想要的,在原有的基础上更改)

直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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

我主要提示几个配置的重点:

  1. npm的token的获取,可以通过npm账号的 accessToken 页面获取(听说你在找我):
    image.png
  2. gitAction token 则到github的token页获取 ,如果你的npm包没有文档类打包类的需求,这一部分可以不配置(戳我
    image.png

配置完之后,在github上的actions界面就可以看到执行中的脚本,大概长成下面这样:

image.png
image.png

如果你的脚本前面全是✔,恭喜你,成功生效了!

关于我

一个艺术家,非传统前端架构师,最近在学popping,喜欢自驾旅游,爱思考,爱生活。

image.png

生命很短,做你想做的。 - dev
首发:个人博客灵感笔记

宝贝儿,听说 npm 你还在手动发包?

http://blog.jiangzhixiong.com/20240520/20240520/

作者

dev

发布于

2024-05-20

更新于

2024-10-08

许可协议

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×