包管理提速: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 测试仓库。
相关推荐
小J听不清1 天前
CSS 三种引入方式全解析:行内 / 内部 / 外部样式表(附优先级规则)
前端·javascript·css·html·css3
aircrushin1 天前
端到端AI决策架构如何重塑实时协作体验?
前端·javascript·后端
AI前端老薛1 天前
前端开发神器 - Image Preview插件
前端
Predestination王瀞潞1 天前
2.4 编码->W3C XML 1.0标准(W3C Recommendation):XML(Extensible Markup Language)
xml·前端
FlyWIHTSKY1 天前
vue3中const的使用和定义
前端·javascript·vue.js
小璐资源网1 天前
如何写出干净、易维护的 HTML 结构
前端·html
gongzemin1 天前
怎么在VS Code 调试vue3 源码
前端·vue.js
C澒1 天前
微前端容器标准化 —— 公共能力篇:CDN 能力
前端·架构
德育处主任Pro1 天前
用 RollCode 重构营销 H5 的开发协作逻辑
前端框架
wulijuan8886661 天前
ECharts图表性能优化的那些事
前端·javascript·echarts