强强联合：pnpm Monorepo + Vite + Changesets 新手入门全攻略

土豆1250
1,265 阅读11分钟

引言

大家好，我是土豆，欢迎关注我的公众号：土豆学前端

在现代前端开发中，项目复杂度日益增加，代码复用和模块化管理成为提升开发效率和维护性的关键。pnpm Monorepo 以其高效的依赖管理和磁盘空间利用率，结合 Vite 闪电般的冷启动和热更新速度，为开发者提供了一套强大的组合拳。当我们再引入 Changesets 来实现专业、自动化的版本管理和发布流程时，这套方案将变得前所未有的强大和优雅。

本文将深入探讨 pnpm Monorepo、Vite 与 Changesets 的结合使用，帮助初次接触 Monorepo 的开发者快速上手，并理解其适用场景与核心优势。

什么是 pnpm Monorepo？

pnpm (performant npm) 是一款快速、节省磁盘空间的包管理工具。它并非天生为 Monorepo 设计，但其独特的工作机制使其在该场景中表现得淋漓尽致。

  1. 非扁平化的 node_modules 结构：pnpm 创建了一个符号链接（symlinks）的 node_modules 目录。与 npm/yarn 会把所有依赖“提升”到根 node_modules 不同，pnpm 只会将你在 package.json 中明确声明的依赖链接到当前项目的 node_modules 中。这些链接最终指向一个全局存储区。这从根本上解决了“幻影依赖”（即能访问到未在 package.json 声明的包）的问题，让依赖关系更加清晰、可预测。
  2. 内容寻址存储 (Content-addressable store)：这是 pnpm 的节约磁盘空间的核心。所有包的每个版本的文件都只会在你电脑的全局存储（通常在 ~/.pnpm-store）中存在一份。当你的多个项目依赖同一个包时，pnpm 会通过硬链接（hard link）的方式将文件“复制”到项目的 node_modules 中。硬链接几乎不占用额外的磁盘空间，这使得在 Monorepo 中拥有数十个项目也无需担心磁盘被重复的依赖占满。
  3. Workspace (工作区) 支持：这是 pnpm 实现 Monorepo 管理的关键。通过在项目根目录下一个简单的 pnpm-workspace.yaml 文件，你就能告诉 pnpm 哪些目录是你的子包。之后，pnpm 会提供一系列强大的命令来统一管理这些子包，例如：
    • pnpm -r <command>：在所有子包中递归执行命令（如 pnpm -r test）。
    • pnpm --filter <package-name> <command>：只在指定的子包中执行命令（如 pnpm --filter my-app add lodash）。

pnpm Monorepo 的核心优势：

  • 极致的磁盘空间效率：全局存储和硬链接机制，让依赖共享几乎零成本。
  • 闪电般的安装速度：充分利用缓存和链接，二次安装速度极快。
  • 严格的依赖管理：杜绝幻影依赖，代码更健壮。
  • 内置的 Monorepo 工具链：无需额外工具即可方便地管理和操作工作区内的多个包。

现代化版本管理：拥抱 Changesets

虽然 pnpm 提供了强大的工作区管理能力，但在版本控制和发布这两个关键环节，我们需要一个更专业的工具。Changesets 正是为此而生的现代最佳实践。

Changesets 是一个用于 Monorepo 的版本管理工具。它与 Lerna 等传统工具最大的不同在于其工作流程。它将“决定版本如何变动”的意图与“实际执行版本发布”的动作分离开来。

Changesets 的核心理念与优势：

  1. 基于意图的 PR 工作流：开发者在提交代码时，顺便创建一个描述本次变更意图的 .md 文件（一个 "changeset")。这个文件会说明哪些包受到了影响，以及这次变更是“补丁(patch)”、“次版本(minor)”还是“主版本(major)”升级。
  2. 自动化生成 CHANGELOG.md：当发布时，Changesets 会自动收集所有未发布的 changeset 文件，更新所有受影响包的 package.json 版本号，并生成清晰、规范的 CHANGELOG.md。
  3. 解耦版本与发布：你可以先在主分支上执行版本更新（changeset version），检查自动生成的版本和日志是否正确，然后再执行发布（changeset publish）。这给了你一个宝贵的“后悔”机会。
  4. 官方集成与机器人：Changesets 由 Atlassian（Jira、Confluence 的母公司）维护，并且提供了一个官方的 GitHub Action 和 Bot。这个 Bot 可以在 PR 中检测你是否忘记添加 changeset，并提醒你，极大地规范了团队协作。

简而言之，在“pnpm + Changesets”的组合中，我们用 pnpm 做所有依赖管理和脚本执行，用 Changesets 优雅地处理版本和发布。

什么是 Vite？

Vite 是一款颠覆性的前端构建工具，它将开发者的体验提升到了一个新的高度。

  1. 极速的冷启动：在开发模式下，Vite 利用浏览器原生支持的 ES Modules (ESM) 特性，无需像 Webpack 那样在启动前打包整个应用。服务器几乎是秒开，你请求哪个页面，Vite 才即时编译哪个模块。
  2. 闪电般的热模块替换 (HMR)：Vite 的 HMR 也是基于 ESM 的。当一个文件被修改，Vite 只需让这个模块和它最近的 HMR 边界失效，更新范围极小，因此无论项目多大，热更新速度始终飞快。
  3. Rollup 打包优化：生产环境构建时，Vite 使用成熟的打包工具 Rollup，它能产出高度优化、体积更小的代码。
  4. 开箱即用：内置对 TypeScript、JSX、CSS 预处理器等的支持，无需繁琐配置。

Vite 的核心优势：

  • 极致的开发体验：告别漫长的等待，享受即时反馈。
  • 按需编译：开发时只编译你需要的，极大提升效率。
  • 现代化输出：面向现代浏览器，也可配置兼容旧版。
  • 强大的生态系统：继承了 Rollup 庞大的插件生态。

pnpm Monorepo + Vite + Changesets 的强强联合

当这三者结合，我们便能搭建一个既能高效管理共享代码、又能享受极致开发体验、还能轻松处理版本发布的现代化前端工程。

优势分析

  1. 极致的代码共享与复用：

    • 场景：多个应用（如后台管理系统、用户门户）需要共享一个内部 UI 组件库、工具函数库等。
    • 优势：在 pnpm Monorepo 中，这些库可以作为独立的包放在 packages 目录下。Vite 应用通过 workspace:* 协议直接依赖这些本地包。当你在共享库中修改代码时，依赖它的 Vite 应用能通过 HMR 实时看到变更，实现了无缝的源码级调试，开发体验如丝般顺滑。

  2. 高效的依赖管理与构建速度：

    • 场景：大型项目中，管理几十个包的依赖版本和构建流程是一场噩梦。
    • 优势：pnpm 保证了依赖的纯粹性和安装速度。Vite 保证了单个包的开发效率。pnpm 的 --filter 和 -r 命令可以让你精确、并行地对指定包进行构建、测试等操作。

  3. 统一的技术栈与开发体验：

    • 场景：团队希望所有项目遵循统一的编码规范和配置。
    • 优势：在 Monorepo 的根目录可以放置共享的 ESLint、Prettier、TypeScript 配置文件，所有子包都能继承，确保代码风格和质量的一致性。

  4. 规范化的 CI/CD 与版本发布：

    • 场景：需要自动化地构建、测试、版本管理和发布多个相互关联的包。
    • 优势：Changesets 的工作流天生为 CI/CD 设计。开发者在本地提交 changeset，合并到主分支后，CI 流程可以自动运行 changeset version 来更新版本和生成日志，然后运行 changeset publish 来发布，整个过程无需人工干预。

适用场景

  • 多应用共享核心库：公司内部的 UI 组件库、工具库、API 服务层等。
  • 开源组件库的开发与维护：Changesets 的工作流非常适合开源项目，可以清晰地记录每个贡献者的变更。
  • 全栈项目：前端 Vite 应用和后端 Node.js 服务可以作为不同包共存，共享类型定义、校验规则等。
  • 微前端架构：每个微前端子应用可以是一个独立的 Vite 项目，由 pnpm Monorepo 统一管理。

如何搭建 pnpm Monorepo + Vite + Changesets 项目

别担心，我们一步步来。下面是一个简化的搭建步骤示例：

1. 初始化 pnpm Monorepo

# 1.1 创建项目目录
mkdir my-monorepo
cd my-monorepo

# 1.2 初始化 pnpm 项目，这会在根目录生成一个 package.json
pnpm init

# 1.3 创建 pnpm-workspace.yaml 文件，告诉 pnpm 我们的代码放在哪
# 内容如下:
# packages:
#  - 'packages/*' # 用于存放共享库
#  - 'apps/*'     # 用于存放最终应用

在项目根目录下创建 pnpm-workspace.yaml 文件，并写入以下内容：

packages:
  - 'packages/*'
  - 'apps/*'

2. 添加并初始化 Changesets

# 2.1 在工作区的根目录安装 Changesets 的命令行工具
# -wD 表示 --workspace-root -D，意思是安装到根目录的 devDependencies
pnpm add -wD @changesets/cli

# 2.2 运行初始化命令
pnpm changeset init

此命令会做两件事：

  1. 创建一个 .changeset 目录。
  2. 在其中生成一个 config.json 配置文件和一个 README.md 说明文件。

3. 创建共享库和 Vite 应用

（此步骤与之前相同）

# 3.1 创建目录结构
mkdir packages apps

# 3.2 在 packages 目录下创建一个共享 UI 库
cd packages
mkdir shared-ui
cd shared-ui
pnpm init # 初始化 shared-ui 的 package.json，并将其 name 设置为 "shared-ui"

# 3.3 回到根目录并创建 Vite 应用
cd ../..
cd apps
pnpm create vite web-app --template vue-ts

4. 在 Vite 应用中引用共享库

（此步骤与之前相同）

# 确保你在项目根目录
pnpm --filter web-app add shared-ui@workspace:*

然后就可以在 web-app 中像普通 npm 包一样 import { MyComponent } from 'shared-ui'。为了获得完美的源码跳转和类型提示，请参照上一版答案中的 “配置 TypeScript Path Mapping 和 Vite Alias” 部分，该部分内容完全适用。

5. Changesets 工作流实战

这才是激动人心的部分！假设你修改了 shared-ui 里的一个组件。

Step 1: 做出你的代码修改 (例如，你修复了 MyButton.vue 的一个样式 bug)

Step 2: 添加一个 Changeset 在你的代码分支上，运行以下命令：

pnpm changeset add

pnpm 会调用 Changesets 的 CLI，它会启动一个交互式命令行，问你几个问题：

  1. Which packages should be bumped? (哪些包需要更新版本？) -> 你可以使用方向键和空格选择 shared-ui。
  2. Which packages should be bumped? (再次询问，让你确认) -> 直接回车。
  3. Select a bump type for shared-ui (为 shared-ui 选择一个更新类型) -> 因为是 bug 修复，我们选择 patch。
  4. What is the summary for this change? (请填写本次变更的摘要) -> 输入 "Fix: Correct the button padding to be consistent."

完成后，Changesets 会在 .changeset 目录下生成一个随机命名的 .md 文件，例如 chilly-rabbits-jump.md，内容如下：

---
"shared-ui": patch
---

Fix: Correct the button padding to be consistent.

Step 3: 提交代码和 Changeset 文件 现在，将你的代码改动和这个新生成的 .md 文件一起提交到 git，并发起一个 Pull Request。

git add .
git commit -m "feat(ui): fix button padding and add changeset"
git push

Step 4: 版本更新与发布 当你的 PR 被合并到主分支后，就到了发布的时刻。

首先，运行版本命令：

pnpm changeset version

这个命令会：

  1. 找到所有的 changeset 文件。
  2. 删除这些 .md 文件。
  3. 根据文件内容，自动更新 packages/shared-ui/package.json 中的 version 字段。
  4. 自动更新 packages/shared-ui/CHANGELOG.md，将变更摘要加进去。

最后，执行发布命令：

# 确保你已经构建了所有需要发布的包
pnpm -r build

# 登录到 npm (只需首次)
# pnpm login

# 发布
pnpm publish -r

pnpm 会找到所有版本号比 npm 仓库中新的包，并将它们发布出去。

6. 推荐的根目录脚本

为了简化操作，可以在根目录的 package.json 中添加如下脚本：

// 根目录 package.json
{
  "private": true,
  "scripts": {
    "dev": "pnpm --filter web-app dev",
    "build": "pnpm -r build",
    "add-change": "pnpm changeset add",
    "version-packages": "pnpm changeset version",
    "release": "pnpm build && pnpm changeset publish"
  }
}

现在你的工作流变成了：

  1. pnpm add-change (在开发分支)
  2. (合并 PR 到主分支后)
  3. pnpm version-packages
  4. pnpm release

结论

pnpm Monorepo、Vite 和 Changesets 的组合，为现代前端开发提供了一个极为强大、高效且流程规范的解决方案。它通过 pnpm 解决了多包管理的复杂性和依赖难题，通过 Vite 带来了极致的开发速度和构建性能，再通过 Changesets 引入了自动化、可追溯的版本管理和发布流程。这套方案特别适用于需要高度代码复用、团队协作和持续交付的场景，是构建高质量、可维护大型项目的不二之选。

avatar
文章
阅读
粉丝