包管理提速: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 测试仓库。
相关推荐
代码搬运媛4 小时前
Jest 测试框架详解与实现指南
前端
counterxing5 小时前
我把 Codex 里的 Skills 做成了一个 MCP,还支持分享
前端·agent·ai编程
wangqiaowq5 小时前
windows下nginx的安装
linux·服务器·前端
之歆5 小时前
DAY_12JavaScript DOM 完全指南(二):实战与性能篇
开发语言·前端·javascript·ecmascript
发现一只大呆瓜5 小时前
Vite凭什么这么快?3分钟带你彻底搞懂 Vite 热更新的幕后黑手
前端·面试·vite
Maimai108085 小时前
React如何用 @microsoft/fetch-event-source 落地 SSE:比原生 EventSource 更灵活的实时推送方案
前端·javascript·react.js·microsoft·前端框架·reactjs·webassembly
kyriewen7 小时前
产品经理把PRD写成“天书”,我用AI半小时重写了一遍,他当场愣住
前端·ai编程·cursor
humcomm8 小时前
元框架的工作原理详解
前端·前端框架
canonical_entropy8 小时前
Attractor Before Harness: AI 大规模开发的方法论
前端·aigc·ai编程
zhangxingchao8 小时前
多 Agent 架构到底怎么选?从 Claude Agent Teams、Cognition/Devin 到工程落地原则
前端·人工智能·后端