宝贝儿，听说 npm 你还在手动发包？

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

背景

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

而每次发包都需要在本地经历打包这个又臭又长的过程，全程需要 15分钟 左右，什么玩意儿？

为什么TMD这么久？？代码5分钟，打包半小时？

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

技术调研

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

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

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

1. 生成变更日志、统一更改npm包版本
2. 将其它任务交给 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

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

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

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

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

关于我

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

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