0Pricing
Frontend Academy · 课时

使用 Turborepo 设置单体仓库

在单个仓库中组织多个应用和共享包，定义 Turbo 流水线，并缓存构建结果以便只重新构建发生变化的部分。

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

什么是单体仓库

单个 Git 仓库中包含多个共享代码的项目（应用、库）。例如：一个仓库中同时包含 Web 应用、移动应用、共享 UI 库和共享工具库。这样更容易共享代码，能够原子化地进行跨领域变更，并且只需一套持续集成流程。

为什么选择 Turborepo

Turborepo 是用于 JavaScript 单体仓库的高性能构建系统。它会缓存任务输出，在各个包之间并行执行，并且只重新构建发生变化的部分。它由 Vercel 构建。

设置 Turborepo

使用官方启动模板。

npx create-turbo@latest my-monorepo
cd my-monorepo

# Structure:
# apps/
#   web/        (Next.js app)
#   docs/       (another Next.js app)
# packages/
#   ui/         (shared component library)
#   eslint-config/
#   tsconfig/

使用工作区的 package.json

根目录中的 package.json 声明了工作区——npm/yarn/pnpm 会为它们创建符号链接，因此应用可以按名称导入各个包。

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "devDependencies": {
    "turbo": "latest"
  }
}

turbo.json——任务流程

定义任务（构建、检查、测试、开发）以及它们在各个包之间的依赖关系。

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "lint": {},
    "test": { "dependsOn": ["^build"] },
    "dev": { "cache": false, "persistent": true }
  }
}

解释 dependsOn

^build 表示：构建此包之前，先构建它所有的工作区依赖。因此，如果 app/web 依赖 packages/ui，就会先构建 ui。

运行任务

在整个单体仓库中运行某个任务。Turbo 会按照拓扑顺序并行执行任务。

# Build everything:
npx turbo run build

# Build only one app and its deps:
npx turbo run build --filter=web

# Run dev mode (persistent, no cache):
npx turbo run dev

# Lint and test in parallel:
npx turbo run lint test

缓存输出

Turbo 会对输入（源文件、依赖项和环境）进行哈希处理，并缓存输出。没有任何变化时再次运行会立即完成——Turbo 会重放缓存的输出，而无需重新执行任务。

远程缓存

将缓存推送到远程缓存（Vercel Remote Cache 或自托管服务），让持续集成机器和团队成员共享缓存——第一个构建的开发者承担构建成本，其他人都可以命中缓存。

npx turbo login
npx turbo link

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

使用 --filter 进行筛选

仅为匹配的包运行任务。

# Run lint only in packages that changed since main:
npx turbo run lint --filter='[main]'

# Run build for web and everything it depends on:
npx turbo run build --filter=web...

# Run dev for the docs app only:
npx turbo run dev --filter=docs

内部包

packages/ 中的包可以按名称相互导入。在依赖项中将它们引用为 "@repo/ui": "*"（使用 pnpm 时为：workspace:*）。

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

// apps/web/app/page.tsx
import { Button } from '@repo/ui';
import { formatDate } from '@repo/utils';

持续集成提示

在持续集成中使用 turbo run build --filter=...[origin/main]，只构建自主分支以来发生变化的部分。结合远程缓存后，未发生变化的包可以将构建时间从几分钟缩短到几秒。

快速检查

Turbo 任务的 dependsOn 数组中的 ^build 条目表示什么？

回顾：Turborepo

JavaScript 单体仓库系统：采用 apps/ + packages/ 结构和工作区。turbo.json 定义任务及 dependsOn 关系。^build = 先构建依赖项。基于哈希的本地缓存可以让重复工作立即完成。远程缓存可以在团队和持续集成环境之间共享缓存命中结果。--filter 用于指定子集。使用 changed-since 加快拉取请求的持续集成。

常见问题解答

「使用 Turborepo 设置单体仓库」课时是免费的吗？

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

「使用 Turborepo 设置单体仓库」这节课中我会学到什么？

在单个仓库中组织多个应用和共享包，定义 Turbo 流水线，并缓存构建结果以便只重新构建发生变化的部分。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「使用 Turborepo 设置单体仓库」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 原子设计：原子、分子与有机体
  2. 使用 Turborepo 设置单体仓库
  3. 微前端：模块联邦
  4. 基于功能的文件夹结构
← 返回 Frontend Academy