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 Schemaschema.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选项默认值说明directory必填新应用所在目录别名--dirstylecss样式文件扩展名可选css/scss/nonebundlerviteschema 默认打包器可选vite/webpack/rspack/rsbuildcompilerbabel编译器可选babel/swcunitTestRunnernoneschema 默认单测运行器可选vitest/jest/nonee2eTestRunnerplaywrightE2E 运行器可选playwright/cypress/noneroutingfalse是否生成路由stricttrue严格模式与严格类型检查classComponentfalse用类组件替代函数组件jsfalse生成 JavaScript 而非 TypeScriptport4200开发服务器端口tags无用于 lint 的项目标签生成流程的内部逻辑可在 application.ts 中看到先调用jsInitGenerator初始化 JS 基础配置再执行reactInitGenerator随后根据打包器分支调用initWebpack/initRspack/initRsbuild接着创建应用文件、注册项目addProject、配置 lintaddLinting、E2EaddE2e并按需配置 Vitest/Jest 与路由。默认情况下生成器还会在nx.json中为build目标写入cache: true与dependsOn: [^build]的默认配置application.ts。使用 Vite 作为打包器--bundlervitenx g nx/react:app apps/my-app --bundlervite注意示例中使用了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通常应显式传入--unitTestRunnervitest。Vite 配置生成时还会针对 React 做专门处理add-vite.ts使用vitejs/plugin-react若选择--compilerswc则改用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。指定样式扩展名--stylescssnx g nx/react:app apps/my-dir/my-app --stylescss该命令在apps/my-dir目录下创建应用my-app并让所有样式文件使用scss扩展名。style选项的合法值定义在 schema.jsoncss默认、scss、none且none表示不生成任何样式文件。样式选择会影响后续的组件与库生成生成器完成时会调用setDefaultsset-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。添加标签--tagsscope:admin,type:uinx g nx/react:app apps/my-app --tagsscope:admin,type:uitags选项别名--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 --port3000 # 使用类组件 SCSS Vitest nx g nx/react:app apps/my-app --classComponent --stylescss --unitTestRunnervitest # 最小化生成无独立测试文件 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 测试。生成器还支持--lintereslint|oxlint|none、--formatterprettier|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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考