React Academy · 课时

使用 React 应用创建 Nx Monorepo

Q: 「使用 React 应用创建 Nx Monorepo」这节课中我会学到什么？

搭建 Nx 工作区，添加 React 应用，并了解项目图。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

搭建 Nx 工作区，添加 React 应用，并了解项目图。

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

为什么选择 Nx？

Nx 是用于单体仓库的智能构建系统。它提供基于受影响项目的任务运行（只构建或测试发生变化的内容）、缓存（不重复运行未发生变化的任务）以及用于搭建应用和库的生成器。

创建新的 Nx 工作区

搭建一个预先配置为支持 React 的新 Nx 工作区。

# Create workspace:
npx create-nx-workspace@latest myorg --preset=react-monorepo
# or for Next.js:
npx create-nx-workspace@latest myorg --preset=next

工作区结构

Nx 将代码组织到 apps/（可部署的应用）和 libs/（共享库）中。每个项目都有自己的 project.json，其中包含任务目标。

myorg/
  apps/
    web/           # React SPA
    admin/         # Admin React SPA
    api/           # NestJS backend
  libs/
    ui/            # shared UI components
    data-access/   # data fetching hooks
    utils/         # shared utilities
  nx.json          # workspace config
  package.json     # single package.json

添加 React 应用

使用 Nx React 生成器添加新应用，所有配置都会预先连接好。

# Add a new React app:
npx nx generate @nx/react:app customer-portal

# Add a Next.js app:
npx nx generate @nx/next:app marketing

运行任务

可以针对单个项目或所有项目运行构建、测试、代码检查和服务任务。

# Serve a specific app:
npx nx serve web

# Build all apps:
npx nx run-many --target=build --all

# Test a specific library:
npx nx test ui

项目图

nx graph 会打开一个交互式可视化图，展示所有应用、库及其依赖关系，帮助您查看哪些项目依赖哪些库。

npx nx graph

Nx 缓存

Nx 会在本地缓存任务输出。重新运行未发生变化的任务时，可以立即命中缓存。Nx Cloud 将缓存扩展为团队成员和 CI 共享的远程缓存。

# First run: builds and caches
npx nx build web  # ~30s

# Second run (no changes): cache hit
npx nx build web  # <1s — served from cache

任务流水线

在 nx.json 中定义任务依赖。运行 build 时，会先自动为所有上游依赖运行 build。

// nx.json
{
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"], // run dependency builds first
      "cache": true
    },
    "test": {
      "cache": true
    }
  }
}

用于强制执行的标签

为项目添加标签（例如 scope:ui、type:app），并使用 ESLint 规则阻止应用导入其他应用的内部代码。

// project.json
{
  "tags": ["scope:web", "type:app"]
}

// .eslintrc.json
{
  "rules": {
    "@nx/enforce-module-boundaries": ["error", {
      "depConstraints": [
        { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] }
      ]
    }]
  }
}

TypeScript 路径别名

Nx 会自动为 tsconfig.base.json 配置路径别名，这样您可以使用 @myorg/ui 导入共享库，而不必使用很深的相对路径。

// tsconfig.base.json (auto-generated)
{
  "compilerOptions": {
    "paths": {
      "@myorg/ui": ["libs/ui/src/index.ts"],
      "@myorg/utils": ["libs/utils/src/index.ts"]
    }
  }
}

// Usage in apps:
import { Button } from '@myorg/ui';

快速检查

nx affected --target=build 在 Nx 单体仓库中会执行什么操作？

回顾

使用 create-nx-workspace 创建 Nx 工作区。使用 nx generate 创建应用和库，使用 nx serve/build/test 执行任务，并在持续集成中使用 nx affected，只处理发生更改的项目。缓存可确保未更改的任务立即返回结果。

常见问题解答

「使用 React 应用创建 Nx Monorepo」课时是免费的吗？

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

「使用 React 应用创建 Nx Monorepo」这节课中我会学到什么？

搭建 Nx 工作区，添加 React 应用，并了解项目图。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

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

「使用 React 应用创建 Nx Monorepo」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 React Academy