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

1,560 阅读3分钟

本文涉及的技术: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商店有很多成品脚本,你可以选择自己想要的,在原有的基础上更改)

直接上代码:

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

个人博客 灵感笔记