ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Nx 是什么:从架构到增量引入的完整解读(Why Nx 课程导读)

Nx 是什么:从架构到增量引入的完整解读(Why Nx 课程导读) Nx 是什么从架构到增量引入的完整解读Why Nx 课程导读【免费下载链接】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本文基于官方课程《Explore Nx》第一章为什么选择 Nx展开结合 Nx 开源仓库GitHub_Trending/nx/nx的源码与配置系统讲解 Nx 的核心定位、运行架构、两种引入方式改造既有项目与新建集成 Monorepo、插件机制、配置抽象与自动化迁移帮助读者在约 10 分钟内建立对 Nx 的完整认知并掌握实际落地路径。一、什么是 Nx一句话定位Nx 是一个面向 JavaScript/TypeScript Monorepo并通过插件扩展到任意语言的构建系统。它帮助你更快地开发并在代码库扩张时保持 CI 的速度。仓库根目录 README.md 对它的定位是Nx is a monorepo solution for TypeScript and polyglot codebases. Built with Rust for performance, extensible via TypeScript. Caches what didnt change, runs only whats affected, and comes with an integrated CI solution. Start simple, scale as you grow.其中三个关键能力可以被浓缩为缓存没有变化的内容Caches what didnt change只运行受影响的部分runs only whats affected提供一体的 CI 解决方案integrated CI solution值得注意的是Nx 的核心是用Rust编写的见仓库根目录 Cargo.toml 与 packages/nx/src/lib.rs其中包含大量.rs原生实现而扩展能力由TypeScript提供——这也是它能在性能与生态扩展之间取得平衡的架构基础。二、Nx 要解决的问题Monorepo 的四大痛点在深入了解 Nx 之前需要先理解它存在的原因。官方文档 intro.mdoc 明确指出Monorepo 虽然在团队协作和上下文共享上优势明显尤其对 AI Agent 而言能获得更多跨切面修改的上下文与工具但随着团队与代码库增长会暴露四大问题痛点表现构建与测试缓慢成百上千个任务在 CI 上争抢资源任务管线复杂项目相互依赖任务必须按正确顺序执行手工管理极其困难CI 不稳定长流水线导致随机失败本地与 CI 环境结果不一致架构腐化缺乏清晰边界不想要的依赖悄悄蔓延项目间高度耦合Nx 的整套设计正是围绕这四点展开的智能缓存解决构建缓慢任务编排解决管线顺序远程缓存与分布式执行解决 CI 不稳定模块边界规则enforce-module-boundaries阻止架构腐化。三、Nx 架构核心图Graph、缓存Cache与受影响AffectedNx 架构的三大支柱可以从源码中得到验证。3.1 项目图与任务图理解代码库结构Nx 会构建Project Graph项目图与Task Graph任务图展示所有项目节点及其依赖关系边。源码位于 packages/nx/src/project-graph/project-graph.ts。在项目图的顶层目录中可以看到完整实现project-graph.ts、operators.ts图遍历与反向操作、nx-deps-cache.ts图缓存等位于 packages/nx/src/project-graph/。有了项目图Nx 才能回答改动会影响谁这个问题有了任务图Nx 才能回答任务应该按什么顺序、以何种并行度执行这个问题。3.2 受影响计算Affected只运行需要运行的这是 Nx 增量构建能力的核心。源码 packages/nx/src/project-graph/affected/affected-project-graph.ts 中的filterAffected函数实现如下流程收集本次变更的touchedFiles发生变化的文件列表通过一组TouchedProjectLocator受影响项目定位器找出受影响的项目getTouchedProjects直接变更文件所属的项目getImplicitlyTouchedProjects隐式受影响的项目如全局配置变化getTouchedProjectsFromProjectGlobChanges项目 glob 变化影响的项目getJSTouchedProjectsJS 插件提供的定位器如package.json依赖变更对项目图取反向图reverse(graph)从受影响项目出发做遍历把所有依赖了受影响项目的项目也一并标记为受影响。这样nx affected:build或nx affected -t build就只会运行真正需要重新构建的任务。3.3 任务哈希与缓存命中缓存即秒回Nx 为每个任务计算哈希输入包括源代码、配置、依赖任务的输出等哈希不变则直接复用缓存结果。相关实现位于 packages/nx/src/hasher/task-hasher.ts、hash-task.ts、file-hasher.ts等。README 中的示例非常直观nx build project-name # 运行任务 nx build project-name # 再次运行 —— 立即命中缓存 nx run-many -t build test # 跨所有项目运行任务 nx graph # 可视化项目依赖在 CI 中本地缓存升级为远程缓存Remote Cache与分布式任务执行Distributed Task Execution这也是 Nx Cloud 的核心能力之一。四、把 Nx 加入任意既有项目nx init课程主题Add Nx to an arbitrary project将 Nx 添加到任意项目对应的实际命令是一条命令npx nxlatest init根据 start-with-existing-project.mdoc该命令的执行过程大致为$ npx nxlatest init ✓ detecting workspace structure # 检测工作区结构 ✓ adding Nx to package.json # 向 package.json 添加 Nx → ready in 12s它做了什么Nx 会读取你现有的package.json脚本scripts把它们识别为可缓存的任务然后自动配置缓存输入/输出。你原有的脚本不需要改动Nx 只是接住它们、缓存它们的输出并且只运行受影响的部分。README 中的原话是Runnpx nx initin any npm/pnpm/yarn workspace. Nx picks up your existingpackage.jsonscripts, caches their outputs, and runs only whats affected. No changes to your setup required.无论你的仓库是 Monorepo、单项目还是介于两者之间nx init都会引导你完成 Nx 的添加与配置。初始化完成后nx.json是新建的package.json会增加一个nx开发依赖原有脚本保持不变。该命令的实现位于 packages/nx/src/command-line/init/init-v1.ts、init-v2.ts、command-object.ts并且支持交互式问答--interactive相关参数来决定如何配置插件。在 PNPM Monorepo 中使用 Nx课程特别提到Nx in a PNPM monorepo。当你的仓库使用 npm/pnpm/yarn workspaces 管理多个包时nx init能够自动识别 workspace 结构仓库根目录的 pnpm-workspace.yaml 与pnpm-lock.yaml是 Nx 识别依赖的关键输入将 workspace 中的每个包识别为 Nx 项目并让 Nx 承担任务调度与缓存的职责。这与直接使用pnpm -r run的最大区别在于pnpm -r只能按脚本名批量运行没有增量概念Nx 在此基础上叠加了受影响过滤与结果缓存以及在多包依赖场景下的正确执行顺序依赖方在被依赖方之后执行。五、为什么要使用 Nx Plugins插件课程主题Why use Nx Plugins。插件是 Nx 从通用任务运行器升级为技术栈感知的构建系统的关键。5.1 插件能做什么根据 README.md 的说明可选插件会自动发现任务auto-discover tasks配置缓存的输入/输出configure cache inputs/outputs基于你的实际工具链生成代码scaffold code based on your actual tooling。支持的生态包括 Vite、Webpack、Jest、Vitest、ESLint、Gradle、Maven、.NET 等。这些插件在本仓库的 packages/ 目录下均有对应源码包nx/vite、nx/webpack、nx/jest、nx/vitest、nx/eslint、nx/gradle、nx/dotnet、nx/next、nx/react、nx/angular、nx/remix、nx/nuxt、nx/playwright、nx/storybook等。5.2 插件在配置中如何出现仓库根目录的 nx.json 展示了真实的插件配置示例。插件通过plugins字段声明既可以写字符串默认配置也可以写成对象并携带选项{ plugins: [ monodon/rust, { plugin: nx/js/typescript, exclude: [examples/**/*, nx-dev/**/*, e2e/**/*], options: { typecheck: true, build: { targetName: build-base }, compiler: tsgo } }, { plugin: nx/jest/plugin, options: { targetName: test } }, { plugin: nx/eslint/plugin, exclude: [packages/**/__fixtures__/**/*, examples/**/*], options: { targetName: lint } } ] }可以看到每个插件都可以通过include/exclude控制作用范围通过options自定义任务名如把 Jest 的测试任务命名为test把 ESLint 的任务命名为lint。这就是插件自动发现任务、按约定生成 target的能力体现——你在project.json中无需手工逐个声明任务。六、搭建全新的 Nx 集成 Monorepo课程主题Setting up a new Nx Integrated Monorepo。如果你是从零开始则使用create-nx-workspacenpx create-nx-workspacelatest根据 start-new-project.mdoc命令会提示你输入工作区名称作为根目录名和起始模板决定初始技术栈例如npx create-nx-workspacelatest --templatenrwl/tanstack-start-template每个模板都是一个开箱即用的 Monorepo项目已相互接线、缓存已开启、任务管线task pipeline已配置。生成命令的输出大致为$ npx create-nx-workspacelatest ✓ generating workspace files ✓ installing dependencies → ready in 20s集成 MonorepoIntegrated Monorepo与独立包各自维护的区别在于Nx 会为整个工作区生成统一的nx.json、project.json每个项目一个位于各自项目目录下、统一的工具链版本项目之间通过 TypeScript 路径映射tsconfig.base.json中的paths互相引用。仓库中每个 Nx 包如packages/react/、packages/angular/都遵循这种结构读者可以查看 packages/react/project.json 感受真实的 project.json 形态。七、抽象底层配置targetDefaults 与 namedInputs课程主题Abstracting low-level configs抽象底层配置对应的是 Nx 的targetDefaults与namedInputs机制。这是 Nx 用来一处定义、处处生效的配置抽象。7.1 namedInputs给输入起名字nx.json 的namedInputs定义了一组可复用的输入集合。例如{ namedInputs: { default: [{projectRoot}/**/*, sharedGlobals], production: [ default, !{projectRoot}/**/?(*.)(spec|test).[jt]s?(x)?(.snap), !{projectRoot}/tsconfig.spec.json, !{projectRoot}/jest.config.[jt]s ], sharedGlobals: [ {workspaceRoot}/babel.config.json, {workspaceRoot}/.github/workflows/ci.yml ] } }语义很清晰production继承default所有源码并排除测试文件、spec 配置等非生产输入。这样一来改动一个测试文件不会导致生产构建的缓存失效。7.2 targetDefaults为所有项目统一配置任务targetDefaults按逻辑任务名build、test、lint等为所有项目设置默认行为避免在每个project.json中重复配置。真实示例摘自 nx.json{ targetDefaults: { build: { dependsOn: [^build, typecheck, build-base], inputs: [production, ^production], cache: true }, test: [ { dependsOn: [test-native, build-native, ^build-native] }, { filter: { plugin: nx/jest/plugin }, options: { args: [--passWithNoTests, --detectOpenHandles, --forceExit] } } ] } }关键字段说明inputs该任务的哈希输入production表示只考虑生产输入^production表示依赖项目的生产输出cache是否启用缓存true表示结果可复用dependsOn任务依赖^build表示依赖项目的 build 先执行filter按插件过滤让同一逻辑目标在不同插件下有不同默认参数例如 Jest 与 Vitest 各自带不同的args。接口定义位于 packages/nx/src/config/nx-json.tsNxJsonConfiguration类型中的targetDefaults与namedInputs字段。这套机制正是 Nx 课程中抽象底层配置的含义——你在一个中心文件中定义规则Nx 把它应用到整个工作区的所有项目。八、自动化代码更新nx migrate课程主题Automated Code Updates对应 Nx 的nx migrate命令。当 Nx 或生态包发布新版本时往往伴随破坏性变更与配置迁移。nx migrate会自动完成读取当前版本与目标版本计算需要执行的迁移脚本每个版本包内声明更新依赖版本并应用迁移必要时更新源码与配置。在源码层面迁移实现位于 packages/nx/src/command-line/migrate/各包的迁移代码位于packages/name/migrations.json中例如 packages/react/migrations.json。值得注意的是本仓库的nx migrate还包含agenticAI 代理相关实现——migrate/agentic/目录下的system-prompt.ts等文件表明迁移过程可以由 AI 代理按步骤执行、通过 handoff 文件衔接handoff.ts、handoff-gitignore.ts这与项目同时增强开发者与 AI Agent的定位一脉相承。仓库根目录的 nx.json 还展示了release配置版本发布、CHANGELOG、Git 行为这是 Nx 将构建、测试、发布一体化的体现读者可作为延伸了解。九、从本节出发下一步学习路径本节视频用约 10 分钟建立了 Nx 的整体视图。如果你想继续深入官方文档 Introduction 是首选的下一步阅读材料其中包含组件与能力总表组件作用Nx Core带本地缓存与 affected 命令的任务运行器适用于任意技术栈Nx Plugins技术栈专属自动化生成器、自动配置项目与任务、依赖检测Nx Cloud远程缓存、任务分发、e2e 任务切分与自愈 CI实际动手路径则有两条与本课程内容一一对应已有项目→ 运行npx nxlatest init按 Add to an Existing Project 的指引先获得任务运行与缓存再逐步引入插件与 CI 能力全新项目→ 运行npx create-nx-workspacelatest按 Start a New Project 的指引选择模板获得一个开箱即用的集成 Monorepo。关键概念缓存、受影响、任务管线、模块边界对应的官方文档路径为缓存见/docs/features/cache-task-results项目/任务图见/docs/features/explore-graph任务管线见/docs/concepts/task-pipeline-configuration模块边界见/docs/features/enforce-module-boundariesCI 特性远程缓存、分布式执行、任务切分、自愈见/docs/features/ci-features。读完本节后你已经掌握了理解这些文档所需的全部背景知识。【免费下载链接】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),仅供参考
返回列表