Frontend Academy · 课时

用于单体仓库的 pnpm 工作区

使用根目录下的 pnpm-workspace.yaml 设置 pnpm 工作区，提升共享依赖，并使用 workspace: 协议链接本地包。

用于单体仓库的 pnpm 工作区 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

为什么选择 pnpm？

pnpm（Performant npm）是一个快速且节省磁盘空间的包管理器。它会将每个包保存一份到全局内容寻址存储中，然后从项目的 node_modules 链接到该存储。同一个依赖被多个项目使用时，只占用一份磁盘空间。

速度与磁盘空间节省

在典型的单体仓库中，pnpm 的安装速度比 npm/yarn 快 2 到 3 倍，磁盘占用减少约 70%。对于包含许多包的单体仓库，优势非常明显。

安装 pnpm

使用 Corepack（Node 16+ 自带），或进行全局安装。

# Corepack (recommended):
corepack enable
corepack prepare pnpm@latest --activate

# Or:
npm install -g pnpm

工作区设置

在根目录创建 pnpm-workspace.yaml，列出包含包的文件夹。

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'
  - '!**/test/**'

项目结构

每个应用和包都有自己的 package.json。根目录有一个工作区 package.json，其中包含共享的 devDeps。

my-monorepo/
  pnpm-workspace.yaml
  package.json         (root, private: true)
  apps/
    web/
      package.json
    docs/
      package.json
  packages/
    ui/
      package.json
    config-eslint/
      package.json

安装依赖

在根目录运行一次 pnpm install。pnpm 会安装所有包中的依赖，并提升公共依赖。

pnpm install

# Install only in one workspace:
pnpm --filter web add react-router-dom

# Install dev dep at root:
pnpm add -Dw typescript prettier

workspace: 协议

使用 workspace:* 引用内部包。pnpm 会将其解析为本地包；发布时会替换为真实版本。

// apps/web/package.json
{
  "dependencies": {
    "@repo/ui": "workspace:*",
    "@repo/utils": "workspace:^1.0.0"
  }
}

// On publish, workspace:* becomes the actual version of @repo/ui.

跨包运行脚本

pnpm -r 会在每个包中运行脚本。使用 --filter 选择部分包。

# Run build in every package:
pnpm -r build

# Only in web and its deps:
pnpm --filter web... build

# Run lint in changed packages since main:
pnpm --filter ...[origin/main] lint

严格的依赖解析

默认情况下，pnpm 使用符号链接，因此一个包只能看到其 package.json 中明确列出的依赖。不会意外泄漏跨包依赖——npm 和经典版 yarn 都允许出现这种问题。

提升模式

pnpm 默认不会提升任何依赖。如果某个传递依赖需要可访问（例如全局 TypeScript），请将以下配置添加到 .npmrc：shamefully-hoist=true（尽可能避免使用），或使用特定的 public-hoist-pattern。

更新依赖

pnpm update 会在 semver 范围内更新依赖。pnpm update -L 会更新到最新版本（忽略插入号范围）。

pnpm update                      # update all
pnpm --filter web update react   # only react, only web
pnpm update -L                   # latest (ignore caret)

与 Turborepo 结合使用

pnpm 提供工作区和安装功能；Turborepo 提供任务编排和缓存功能。二者配合得非常好——大多数 JavaScript 单体仓库都会同时使用它们。

# pnpm install dependencies
pnpm install

# Turborepo runs the tasks across the workspace:
pnpm turbo run build --filter=web...

持续集成技巧

缓存 pnpm 的内容寻址存储（~/.local/share/pnpm/store），以加快持续集成。使用 --frozen-lockfile，这样当 pnpm-lock.yaml 需要变化时就会失败。

# .github/workflows/ci.yml
- uses: pnpm/action-setup@v3
  with: { version: 9 }
- uses: actions/setup-node@v4
  with: { node-version: '20', cache: 'pnpm' }
- run: pnpm install --frozen-lockfile
- run: pnpm -r build

快速检查

在单体仓库中，与 npm/yarn 相比，pnpm 节省磁盘空间的主要优势是什么？

回顾：pnpm 工作区

单一内容寻址存储加符号链接 = 安装速度快，磁盘占用减少约 70%。pnpm-workspace.yaml 列出包所在的文件夹。使用 workspace:* 协议引用内部依赖。pnpm -r 跨所有包运行脚本；使用 --filter 选择部分包。严格解析可防止依赖泄漏。与 Turborepo 搭配进行任务编排。在持续集成中使用 --frozen-lockfile。

常见问题解答

「用于单体仓库的 pnpm 工作区」课时是免费的吗？

是的 — 「用于单体仓库的 pnpm 工作区」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「用于单体仓库的 pnpm 工作区」这节课中我会学到什么？

使用根目录下的 pnpm-workspace.yaml 设置 pnpm 工作区，提升共享依赖，并使用 workspace: 协议链接本地包。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「用于单体仓库的 pnpm 工作区」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy