XFlow源码工程指南pnpm nx tsup多包Monorepo架构与构建流程详解【免费下载链接】XFlowReact component for building interactive diagrams.项目地址: https://gitcode.com/gh_mirrors/xf/XFlowXFlow 是一个用于构建交互式流程图、拓扑图的 React 组件库其源码仓库采用了一套经典的多包 Monorepo工程方案用 pnpm Workspace 管理包拓扑与依赖安装用 nx 做任务编排、并行执行与构建缓存用 tsup 生成 ESM / CJS 双格式发布产物。本文带你从目录结构、工作区配置到完整构建流程快速看懂这个多包项目的工程化设计。1️⃣ XFlow 仓库目录结构三类目录各司其职打开仓库根目录你会发现所有代码被清晰地划分为三层这正是 Monorepo 的典型组织方式XFlow/ ├── apps/ # 示例应用基于 umi 的演示站点 ├── packages/ # 可发布的组件库 │ ├── core/ # antv/xflow 核心包 │ └── diff/ # antv/xflow-diff 差异对比包 ├── tooling/ # 共享工程配置tsconfig / tsup / jest / eslint / stylelint ├── nx.json # nx 任务编排与缓存配置 ├── pnpm-workspace.yaml # pnpm 工作区声明 └── package.json # 根脚本与公共 devDependenciesapps/basic面向开发者的演示应用基于 umi 搭建页面里覆盖流程图、拖拽、分组、Diff 对比等示例是理解组件用法的最佳入口packages/core核心产物即 npm 上的antv/xflow内部封装了 X6 图引擎与十余个插件历史、小地图、对齐线、变换等packages/diffantv/xflow-diff提供图结构 Diff 对比能力依赖核心包tooling/*把 tsconfig、tsup、jest、eslint、stylelint 配置抽成 5 个内部 workspace 包供所有子包复用避免配置散落各处。2️⃣ pnpm WorkspaceMonorepo 的地基XFlow 的 Monorepo 底座由 pnpm-workspace.yaml 定义packages: - apps/* - packages/* - tooling/*一行声明覆盖三类目录pnpm 会为每个子包创建独立node_modules通过硬链接共享依赖安装快、无幽灵依赖。几个值得注意的细节强制使用 pnpm根 package.json 中设置了preinstall: npx only-allow pnpm用 npm 或 yarn 执行安装会直接报错从机制上杜绝了 lockfile 混乱锁定工具版本packageManager: pnpm7.27.0与engines.node 16.19.0保证所有协作者环境一致workspace 协议引用内部包apps/basic 中依赖写作antv/xflow: workspace:*packages/diff 中写作antv/xflow: workspace:^——本地开发时始终指向源码包无需手动 link精准操作单个包借助pnpm --filter可以只对某个子包执行命令例如pnpm --filter ./packages/core run build只构建核心包。3️⃣ nx 任务编排并行、缓存与依赖拓扑如果说 pnpm 解决了依赖装在哪里nx 解决的就是任务按什么顺序跑。核心配置在 nx.json并行度控制parallel: 6多包任务最多 6 个并发兼顾速度与资源占用构建缓存cacheableOperations把 setup、build、lint、test 都纳入缓存未改动的包直接复用上次产物二次构建几乎秒级完成依赖拓扑排序targetDefaults中 build 声明了dependsOn: [^build]^表示依赖我的上游包先构建。于是pnpm build会自动先构建antv/xflow再构建依赖它的antv/xflow-diff最后构建 apps无需人工排序变更感知ci脚本使用nx affected --targetlint:js,lint:css,lint:format,test配合defaultBase: main只对与 main 分支有差异的包做检查大幅提升 CI 效率。根目录的脚本全部是nx run-many的封装dev100 路并行启动所有子包开发服务、build--nx-bailtrue失败即中断、lint、test一条命令驱动整个仓库。4️⃣ tsup Rollup从源码到发布产物的构建链路以核心包 packages/core/package.json 为例构建链路分两步tsup 生成双格式产物build脚本先执行tsup src/index.ts输出dist/index.esm.js与dist/index.cjs.js对应 package.json 的module/main字段Rollup 追加 UMD 包build:umd通过 rollup 再打一个浏览器直接可用的 UMD bundle方便 CDN 场景引用。真正聪明的地方在于构建配置是共享复用的每个包的 tsup 配置只有一行module.exports require(antv/config-tsup)具体规则集中在 tooling/tsup/index.jsformat: [esm, cjs] 自定义扩展名.esm.js/.cjs.jssourcemap: true保留源码映射便于线上排错集成esbuild-plugin-svgr让 SVG 图标可以当 React 组件导入.less文件按 copy 策略原样输出onSuccess钩子再调用tsc --emitDeclarationOnly单独生成类型声明到dist/typing/保证发布包的types字段可用。开发时执行pnpm dev即触发 tsup 的--watch模式源码改动后核心包自动增量重编演示应用热更新即可看到效果——这就是 Monorepo 联调的体验优势。5️⃣ XFlow Monorepo 开发全流程命令清单照抄即可前置要求Node.js 16.19.0pnpm 7.x# 1. 克隆仓库 git clone https://gitcode.com/gh_mirrors/xf/XFlow cd XFlow # 2. 初始化安装依赖 nx 初始化所有子包 pnpm bootstrap # 3. 启动开发服务默认 http://localhost:8000 pnpm dev # 4. 代码质量格式自动修复 / 全量检查 / 单元测试 pnpm fix pnpm lint pnpm test # 5. 全量构建并本地预览产物 pnpm build pnpm serve 日常只动一个包时记得加--filter例如pnpm --filter antv/xflow run dev可以显著减少无关包的监听与构建。6️⃣ 常见坑与最佳实践场景建议做法误用 npm / yarn 安装会被only-allow pnpm拦截坚持用 pnpm给某个子包加依赖pnpm --filter 包名 add 依赖内部包加--workspace提交信息不规范仓库启用 commitlint遵循 Conventional Commitsfeat:/fix:/refactor:…新增共享配置放到tooling/下做成 workspace 包子包以workspace:^引用构建产物异常先pnpm clean清掉所有 dist 与 node_modules再pnpm bootstrapCI 全量太慢参考根ci脚本思路用nx affected只检查受影响包小结XFlow 的源码工程是一个中小规模 Monorepo 的优秀范本pnpm Workspace 管依赖拓扑nx 管任务编排与缓存tsup 管产物生成tooling 目录管配置复用。四层职责分明开发者既能一条pnpm bootstrap跑通全局也能--filter精准到单个包高效迭代。如果你正在搭建自己的多包 React 组件库这套pnpm nx tsup的组合完全可以照搬甚至可以直接参考仓库中 apps/basic 与 packages/core 的目录组织方式。【免费下载链接】XFlowReact component for building interactive diagrams.项目地址: https://gitcode.com/gh_mirrors/xf/XFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 XFlow源码工程指南：pnpm + nx + tsup多包Monorepo架构与构建流程详解
XFlow源码工程指南pnpm nx tsup多包Monorepo架构与构建流程详解【免费下载链接】XFlowReact component for building interactive diagrams.项目地址: https://gitcode.com/gh_mirrors/xf/XFlowXFlow 是一个用于构建交互式流程图、拓扑图的 React 组件库其源码仓库采用了一套经典的多包 Monorepo工程方案用 pnpm Workspace 管理包拓扑与依赖安装用 nx 做任务编排、并行执行与构建缓存用 tsup 生成 ESM / CJS 双格式发布产物。本文带你从目录结构、工作区配置到完整构建流程快速看懂这个多包项目的工程化设计。1️⃣ XFlow 仓库目录结构三类目录各司其职打开仓库根目录你会发现所有代码被清晰地划分为三层这正是 Monorepo 的典型组织方式XFlow/ ├── apps/ # 示例应用基于 umi 的演示站点 ├── packages/ # 可发布的组件库 │ ├── core/ # antv/xflow 核心包 │ └── diff/ # antv/xflow-diff 差异对比包 ├── tooling/ # 共享工程配置tsconfig / tsup / jest / eslint / stylelint ├── nx.json # nx 任务编排与缓存配置 ├── pnpm-workspace.yaml # pnpm 工作区声明 └── package.json # 根脚本与公共 devDependenciesapps/basic面向开发者的演示应用基于 umi 搭建页面里覆盖流程图、拖拽、分组、Diff 对比等示例是理解组件用法的最佳入口packages/core核心产物即 npm 上的antv/xflow内部封装了 X6 图引擎与十余个插件历史、小地图、对齐线、变换等packages/diffantv/xflow-diff提供图结构 Diff 对比能力依赖核心包tooling/*把 tsconfig、tsup、jest、eslint、stylelint 配置抽成 5 个内部 workspace 包供所有子包复用避免配置散落各处。2️⃣ pnpm WorkspaceMonorepo 的地基XFlow 的 Monorepo 底座由 pnpm-workspace.yaml 定义packages: - apps/* - packages/* - tooling/*一行声明覆盖三类目录pnpm 会为每个子包创建独立node_modules通过硬链接共享依赖安装快、无幽灵依赖。几个值得注意的细节强制使用 pnpm根 package.json 中设置了preinstall: npx only-allow pnpm用 npm 或 yarn 执行安装会直接报错从机制上杜绝了 lockfile 混乱锁定工具版本packageManager: pnpm7.27.0与engines.node 16.19.0保证所有协作者环境一致workspace 协议引用内部包apps/basic 中依赖写作antv/xflow: workspace:*packages/diff 中写作antv/xflow: workspace:^——本地开发时始终指向源码包无需手动 link精准操作单个包借助pnpm --filter可以只对某个子包执行命令例如pnpm --filter ./packages/core run build只构建核心包。3️⃣ nx 任务编排并行、缓存与依赖拓扑如果说 pnpm 解决了依赖装在哪里nx 解决的就是任务按什么顺序跑。核心配置在 nx.json并行度控制parallel: 6多包任务最多 6 个并发兼顾速度与资源占用构建缓存cacheableOperations把 setup、build、lint、test 都纳入缓存未改动的包直接复用上次产物二次构建几乎秒级完成依赖拓扑排序targetDefaults中 build 声明了dependsOn: [^build]^表示依赖我的上游包先构建。于是pnpm build会自动先构建antv/xflow再构建依赖它的antv/xflow-diff最后构建 apps无需人工排序变更感知ci脚本使用nx affected --targetlint:js,lint:css,lint:format,test配合defaultBase: main只对与 main 分支有差异的包做检查大幅提升 CI 效率。根目录的脚本全部是nx run-many的封装dev100 路并行启动所有子包开发服务、build--nx-bailtrue失败即中断、lint、test一条命令驱动整个仓库。4️⃣ tsup Rollup从源码到发布产物的构建链路以核心包 packages/core/package.json 为例构建链路分两步tsup 生成双格式产物build脚本先执行tsup src/index.ts输出dist/index.esm.js与dist/index.cjs.js对应 package.json 的module/main字段Rollup 追加 UMD 包build:umd通过 rollup 再打一个浏览器直接可用的 UMD bundle方便 CDN 场景引用。真正聪明的地方在于构建配置是共享复用的每个包的 tsup 配置只有一行module.exports require(antv/config-tsup)具体规则集中在 tooling/tsup/index.jsformat: [esm, cjs] 自定义扩展名.esm.js/.cjs.jssourcemap: true保留源码映射便于线上排错集成esbuild-plugin-svgr让 SVG 图标可以当 React 组件导入.less文件按 copy 策略原样输出onSuccess钩子再调用tsc --emitDeclarationOnly单独生成类型声明到dist/typing/保证发布包的types字段可用。开发时执行pnpm dev即触发 tsup 的--watch模式源码改动后核心包自动增量重编演示应用热更新即可看到效果——这就是 Monorepo 联调的体验优势。5️⃣ XFlow Monorepo 开发全流程命令清单照抄即可前置要求Node.js 16.19.0pnpm 7.x# 1. 克隆仓库 git clone https://gitcode.com/gh_mirrors/xf/XFlow cd XFlow # 2. 初始化安装依赖 nx 初始化所有子包 pnpm bootstrap # 3. 启动开发服务默认 http://localhost:8000 pnpm dev # 4. 代码质量格式自动修复 / 全量检查 / 单元测试 pnpm fix pnpm lint pnpm test # 5. 全量构建并本地预览产物 pnpm build pnpm serve 日常只动一个包时记得加--filter例如pnpm --filter antv/xflow run dev可以显著减少无关包的监听与构建。6️⃣ 常见坑与最佳实践场景建议做法误用 npm / yarn 安装会被only-allow pnpm拦截坚持用 pnpm给某个子包加依赖pnpm --filter 包名 add 依赖内部包加--workspace提交信息不规范仓库启用 commitlint遵循 Conventional Commitsfeat:/fix:/refactor:…新增共享配置放到tooling/下做成 workspace 包子包以workspace:^引用构建产物异常先pnpm clean清掉所有 dist 与 node_modules再pnpm bootstrapCI 全量太慢参考根ci脚本思路用nx affected只检查受影响包小结XFlow 的源码工程是一个中小规模 Monorepo 的优秀范本pnpm Workspace 管依赖拓扑nx 管任务编排与缓存tsup 管产物生成tooling 目录管配置复用。四层职责分明开发者既能一条pnpm bootstrap跑通全局也能--filter精准到单个包高效迭代。如果你正在搭建自己的多包 React 组件库这套pnpm nx tsup的组合完全可以照搬甚至可以直接参考仓库中 apps/basic 与 packages/core 的目录组织方式。【免费下载链接】XFlowReact component for building interactive diagrams.项目地址: https://gitcode.com/gh_mirrors/xf/XFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考