包管理提速: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 天前
婚纱摄影网站|基于ssm + vue婚纱摄影网站系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·后端
C_心欲无痕1 天前
ts - tsconfig.json配置讲解
linux·前端·ubuntu·typescript·json
清沫1 天前
Claude Skills:Agent 能力扩展的新范式
前端·ai编程
yinuo1 天前
前端跨页面通信终极指南:方案拆解、对比分析
前端
yinuo1 天前
前端跨页面通讯终极指南⑨:IndexedDB 用法全解析
前端
xkxnq1 天前
第二阶段:Vue 组件化开发(第 16天)
前端·javascript·vue.js
烛阴1 天前
拒绝配置地狱!5 分钟搭建 Three.js + Parcel 完美开发环境
前端·webgl·three.js
xkxnq1 天前
第一阶段:Vue 基础入门(第 15天)
前端·javascript·vue.js
anyup1 天前
2026第一站:分享我在高德大赛现场学到的技术、产品与心得
前端·架构·harmonyos
BBBBBAAAAAi1 天前
Claude Code安装记录
开发语言·前端·javascript