包管理提速:pnpm + Workspace + Changesets 搭建版本体系

多包项目如果还用 npm install 单仓库维护,效率会被拖垮。今天教你用 pnpm + Workspace + Changesets 搭出一套"既快又有版本管理"的包管理体系:依赖安装提速、包间共享、自动生成 changelog、自动发版,一条龙服务。

🎯 目标

  • 依赖安装和磁盘占用更省(pnpm)。
  • 项目内多个包共享依赖(Workspace)。
  • 自动生成版本号、changelog、发包命令(Changesets)。

🧱 初始化 pnpm Workspace

pnpm-workspace.yaml:

yaml 复制代码
packages:
  - 'apps/*'
  - 'packages/*'

执行:

bash 复制代码
pnpm install
  • pnpm 使用内容寻址存储,依赖只安装一次。
  • pnpm list --depth 0 查看依赖树。

📦 包互相引用

packages/utils/package.json:

json 复制代码
{
  "name": "@my-org/utils",
  "version": "0.0.0",
  "main": "dist/index.js"
}

主应用引用:

json 复制代码
{
  "dependencies": {
    "@my-org/utils": "workspace:*"
  }
}
  • workspace:* 表示使用当前仓库内的最新构建。

🧰 Changesets 安装

bash 复制代码
pnpm install -D @changesets/cli
pnpm changeset init

生成 .changeset 文件夹。

新增改动:

bash 复制代码
pnpm changeset
  • 选择需要发版的包、选择版本(patch/minor/major)。

  • 自动生成变更文件:

    md 复制代码
    ---
    '@my-org/utils': minor
    ---
    新增日期格式化工具

🚀 发版流程

  1. pnpm changeset version:根据变更文件更新 package.json 版本。
  2. pnpm install:同步 lockfile。
  3. pnpm changeset publish:使用 npm token 自动发布。

在 CI 中:

yaml 复制代码
- run: pnpm changeset version
- run: pnpm install --frozen-lockfile
- run: pnpm changeset publish
  • 可以在 PR 合并后自动发 Beta 包。

⚙️ 与 Turborepo 配合

  • Changesets 创建 release 标签。
  • Turborepo 的 pipelines 自动根据版本变化构建对应包。
  • 远程缓存 + pnpm store 让构建更快。

🧯 常见坑

问题 现象 解决
pnpm 与 npm 脚本不兼容 有些脚本默认用 npm 在 CI 中使用 pnpm,对第三方脚本加 --
发版失败 npm token 权限不足 在仓库 secrets 中设置 NPM_TOKEN,权限至少 publish
包版本混乱 手动改版本号 使用 Changesets 统一管理,禁止手动修改
Git 提交变更文件冲突 多人创建 changeset 合并时保留所有变更文件,执行 pnpm changeset version 解决

🏁 小练习

  1. 搭建一个包含主应用 + 组件库的 workspace,尝试共享依赖。
  2. 为组件库新增功能,使用 Changesets 自动生成版本并发包到 npm 测试仓库。
相关推荐
鶴哥只手遮天1 小时前
React 19.3.1 源码深度剖析-第 12 章(下)RSC 与 Flight 协议
前端·react.js·开源
deli0071 小时前
TCP 三次握手到底发几个包?丢包重传动画实测一遍
前端
盟接之桥2 小时前
盟接之桥谈线束数字化-按单入按单出:线束企业库存管理的破局之道
大数据·前端·网络·数据库·人工智能·制造
巴勒个啦2 小时前
Prompt Engineering 实战:5 个让 AI 生成生产级业务代码的工程模式
java·前端
去伪存真2 小时前
AI时代,古法编程的码农路在何方?
前端
计算机魔术师2 小时前
从7月绕过沙盒到9月再曝违规,OpenAI的AI安全防线在漏什么
前端
我的div丢了肿么办2 小时前
element-plus表格使用:filter-method过滤导致出现无数据
前端·javascript·vue.js
F_Quant2 小时前
高股息+破净+PEG三因子:年化20%的背后,是一个“敢于证伪自己”的捡烟蒂策略
前端
不可能片场2 小时前
Electron 发布核验 别把没查到当成没发出去
前端·electron
开开心心就好2 小时前
文件被占用删不掉?解锁工具强制删除
java·运维·服务器·开发语言·前端·pdf·ocr