0Pricing
TypeScript Academy · 课时

使用 TypeScript 配置 pnpm 工作区

使用 pnpm 和共享 tsconfig 配置单体仓库

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

什么是 pnpm 工作区

pnpm 工作区允许您在单个代码仓库中管理多个包，共享 node_modules 结构，减少磁盘占用，并支持跨包导入。

# pnpm-workspace.yaml
packages:
  - "packages/*"
  - "apps/*"

创建工作区结构

典型的 pnpm 单仓库使用 packages/ 存放共享库，使用 apps/ 存放可部署的应用。

monorepo/
├── pnpm-workspace.yaml
├── package.json          # root
├── packages/
│   ├── core/             # shared logic
│   └── ui/               # shared components
└── apps/
    └── web/              # Next.js app

根目录 tsconfig.json

根目录 tsconfig 会设置基础选项，并引用所有工作区包。

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler"
  },
  "references": [
    { "path": "packages/core" },
    { "path": "packages/ui" },
    { "path": "apps/web" }
  ]
}

包级 tsconfig

每个包都会继承根目录配置，并设置自己的 composite 和 outDir。

// packages/core/tsconfig.json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

安装跨包依赖

请将 pnpm add 与工作区协议结合使用，以链接单仓库中的包。

# Add @myapp/core to apps/web
pnpm add @myapp/core --workspace --filter apps/web

# package.json entry:
# "@myapp/core": "workspace:*"

TypeScript 路径解析

请在根目录 tsconfig 中添加 paths 别名，以便 TypeScript 在开发期间将工作区包解析到其源代码。

{
  "compilerOptions": {
    "paths": {
      "@myapp/core": ["./packages/core/src/index.ts"],
      "@myapp/ui": ["./packages/ui/src/index.ts"]
    }
  }
}

构建所有包

请从根目录使用 tsc --build，按照依赖顺序构建所有复合包。

# Build all
tsc --build

# Or with pnpm recursive script:
pnpm -r build

在各个包中运行脚本

pnpm -r（递归）或 --filter 会在所有匹配的包中运行脚本。

# Run tests in all packages
pnpm -r test

# Run only in packages/core
pnpm --filter @myapp/core test

共享 ESLint 和 Prettier 配置

请将代码检查配置放在共享包中，并让每个包继承这些配置，以确保整个单仓库的代码风格一致。

// packages/eslint-config/index.js
module.exports = { extends: ["airbnb-typescript"], ... };

Turborepo 集成

请添加 Turborepo 来缓存并并行执行构建、测试和代码检查任务，同时使用 pnpm 工作区图确定依赖顺序。

npx create-turbo@latest
# or add to existing monorepo:
pnpm add turbo -w

回顾：使用 TypeScript 的 pnpm 工作区

pnpm 工作区加上 TypeScript 项目引用，可以构成强大的单仓库方案：共享 node_modules、通过 workspace:* 进行跨包导入，以及使用 tsc --build 实现快速构建。

快速检查

哪个文件定义了哪些目录属于 pnpm 工作区包？

您学到的内容

结合 TypeScript 项目引用的 pnpm 工作区，可以构建高效的单仓库，提供共享的 node_modules、通过工作区协议进行跨包链接以及增量构建。您还可以添加 Turborepo 来实现缓存和并行执行。

常见问题解答

「使用 TypeScript 配置 pnpm 工作区」课时是免费的吗？

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

「使用 TypeScript 配置 pnpm 工作区」这节课中我会学到什么？

使用 pnpm 和共享 tsconfig 配置单体仓库 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「使用 TypeScript 配置 pnpm 工作区」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. TypeScript 项目引用详解
  2. 使用 TypeScript 配置 pnpm 工作区
  3. 共享类型包策略
  4. 单体仓库中的增量构建与缓存
← 返回 TypeScript Academy