企业官网建设流程全解析

Nx React 应用生成器实战：从nx g @nx/react:application到可运行应用

【免费下载链接】nxThe Monorepo Platform that amplifies both developers and AI agents. Nx optimizes your builds, scales your CI, and fixes failed PRs automatically. Ship in half the time.项目地址: https://gitcode.com/GitHub_Trending/nx/nx

本指南围绕 Nx 官方文档 application-examples.md 展开，系统讲解使用@nx/react插件的application生成器创建 React 应用的核心命令与配置参数。你将掌握：如何生成一个基本应用、如何用 Vite 作为打包器并搭配 Vitest 单测、如何指定 SCSS 样式扩展名，以及如何通过--tags为应用打上便于 lint 约束的标签，同时结合仓库源码理解这些选项在生成器内部的真实行为与默认值。

示例总览

@nx/react是 Nx 仓库中管理 React 应用的官方插件，其应用生成器定义在 packages/react/src/generators/application，对应的 JSON Schema（schema.json）声明了全部可用选项，而 application-examples.md 则是这些选项最常见的四个使用示例。生成器的主入口位于 application.ts，它会依次完成@nx/js初始化、React 初始化、应用文件生成、lint、E2E 与单元测试配置、路由配置以及nx.json默认值写入等一连串任务。

下面的四个小节逐一对应文档中的示例，并在每个示例后补充源码层面的细节。

创建基础应用：nx g @nx/react:application apps/my-app

最简单的用法是直接指定应用目录生成一个名为my-app的应用：

nx g @nx/react:application apps/my-app

从 schema.json 可以看到，directory是application生成器唯一必填的参数，且通过$default与命令行第一个位置参数绑定，因此apps/my-app会解析为目录。生成器会同时产出apps/my-app与配套的apps/my-app-e2e两个项目（见 schema.json 中的示例）。

不显式传入任何选项时，生成器使用以下默认值（来源：normalize-options.ts 与 schema.json）：

生成流程的内部逻辑可在 application.ts 中看到：先调用jsInitGenerator初始化 JS 基础配置，再执行reactInitGenerator，随后根据打包器分支调用initWebpack/initRspack/initRsbuild，接着创建应用文件、注册项目（addProject）、配置 lint（addLinting）、E2E（addE2e），并按需配置 Vitest/Jest 与路由。默认情况下，生成器还会在nx.json中为build目标写入cache: true与dependsOn: ['^build']的默认配置（application.ts）。

使用 Vite 作为打包器：--bundler=vite

nx g @nx/react:app apps/my-app --bundler=vite

注意示例中使用了app别名——application生成器注册了app快捷别名，nx g @nx/react:app ...与nx g @nx/react:application ...等价。

选择vite打包器时，文档明确指出：单元测试将自动配置为 Vitest，除非你把unitTestRunner显式设为none。这一行为在源码中得到印证：在 application.ts 中，bundler === 'vite'时会调用setupViteConfiguration；而 add-vite.ts 中includeVitest直接取自options.unitTestRunner === 'vitest'，同时 normalize-options.ts 会把未指定的unitTestRunner解析为jest——两者结合后，Vite 项目若想使用 Vitest，通常应显式传入--unitTestRunner=vitest。

Vite 配置生成时还会针对 React 做专门处理（add-vite.ts）：

• 使用@vitejs/plugin-react（若选择--compiler=swc则改用@vitejs/plugin-react-swc）；
• 将react、react-dom、react/jsx-runtime设为外部依赖（rolldownOptionsExternal）；
• 若同时开启--routing且选择 React Router，会注入@react-router/dev/vite插件（!process.env.VITEST && reactRouter()），保证测试环境下不加载路由插件。

另外，如果选择了 Vite 之外的打包器（如 webpack/rspack/rsbuild）却仍要求 Vitest，生成器会单独调用setupVitestConfiguration补齐 Vitest 配置（add-vite.ts）。若配合--inSourceTests，则不会生成独立的 spec 文件，而是将测试内联进源码（对应src/app/app.spec.tsx会被删除的逻辑，见 application.ts）。

指定样式扩展名：--style=scss

nx g @nx/react:app apps/my-dir/my-app --style=scss

该命令在apps/my-dir目录下创建应用my-app，并让所有样式文件使用scss扩展名。style选项的合法值定义在 schema.json：css（默认）、scss、none，且none表示不生成任何样式文件。

样式选择会影响后续的组件与库生成：生成器完成时会调用setDefaults（set-defaults.ts），把本次选择的style、linter、bundler等写回nx.json的generators['@nx/react']下，作为application、component、library三类生成器的默认值。这意味着在本应用之后执行nx g @nx/react:component或nx g @nx/react:library时，会默认沿用scss样式，无需重复指定。此外还有--globalCss选项控制组件使用*.css/*.scss而非*.module.css/*.module.scss（见 schema.json）。

添加标签：--tags=scope:admin,type:ui

nx g @nx/react:app apps/my-app --tags=scope:admin,type:ui

tags选项（别名--t）为应用附加项目标签，主要用于 lint 约束。传入的字符串会被按逗号切分并去除首尾空白，得到['scope:admin', 'type:ui']这样的标签数组（见 normalize-options.ts），随后通过addProject写入项目配置。

这些标签会参与 Nx 的enforce-module-boundaries规则：配合nx.json中generators['@nx/react'].application.tags或独立的 lint 配置，可以为不同scope/type组合设置允许或禁止的依赖关系（例如限制type:ui的应用不得依赖type:data之外的库），从而实现项目边界的强制约束。标签本身不改变应用行为，它是组织大型 monorepo 中模块依赖权限的基础设施。

更多选项与下一步

除文档示例覆盖的选项外，生成器还支持大量实用参数，完整列表见 schema.json。几个常用组合示例：

# 使用 react-router 并指定开发端口 nx g @nx/react:app apps/my-app --routing --useReactRouter --port=3000 # 使用类组件 + SCSS + Vitest nx g @nx/react:app apps/my-app --classComponent --style=scss --unitTestRunner=vitest # 最小化生成（无独立测试文件） nx g @nx/react:app apps/my-app --minimal

生成的应用通过nx serve apps/my-app启动开发服务器（默认端口 4200，可用--port覆盖），nx build apps/my-app执行构建，nx test apps/my-app与nx e2e apps/my-app分别运行单测与 E2E 测试。生成器还支持--linter=eslint|oxlint|none、--formatter=prettier|oxfmt|none、--enableTypedLinting（开启类型感知 lint，默认关闭以换取 lint 性能）等选项，详见 schema.json。若想深入了解生成器的测试覆盖与输出结构，可查看 application.spec.ts 与files/模板目录；其余生成器（如component、library、host/remote等）的示例则收录在 packages/react/docs 下的各*-examples.md文档中。

【免费下载链接】nxThe Monorepo Platform that amplifies both developers and AI agents. Nx optimizes your builds, scales your CI, and fixes failed PRs automatically. Ship in half the time.项目地址: https://gitcode.com/GitHub_Trending/nx/nx