ArtCraft 前端 Monorepo 巡礼Nx Vite 如何让 40 多个微包高效协作【免费下载链接】artcraftArtCraft is an intentional crafting engine for artists, designers, and filmmakers项目地址: https://gitcode.com/GitHub_Trending/ar/artcraftArtCraft 是一款面向艺术家、设计师和电影人的 AI 图像与视频创作引擎The IDE for artists。它的前端是一个典型的大型 Monorepo在frontend/目录下用Nx Vite统一管理 1 个 Tauri 桌面应用和40 多个微包UI 组件、API 封装、Tauri 桥接、状态库等全部共享一套别名解析、测试与构建配置。本文带你快速看懂这套前端架构的协作机制 一、Monorepo 目录全景一个入口几十个包先看根目录 frontend/package.json 里的workspaces声明它定义了哪些目录属于这个工作区目录角色说明apps/artcraft唯一的 AppTauri 桌面应用前端React 18 Vite 构建libs/components/UI 组件库40 个独立组件包button、modal、promptbox、video-editor、pagescene……libs/ 顶层库基础能力api、common、icons、model-list、soundboard、omni-gen 等libs/state/共享状态credits积分、subscription订阅libs/tauri-api/ 等Tauri 桥接前后端 IPC 调用封装每个包都是一个标准的 npm 包有独立的package.json命名统一为storyteller/*前缀、独立的vite.config.ts和tsconfig.lib.json可以单独nx build/nx test也可以被 App 直接引用——这正是 Monorepo 的价值所在。二、40 多个微包如何分工组件包全部住在 libs/components/ 下按一组件一目录切分例如libs/components/button/Button基础按钮libs/components/promptbox/AI 提示词输入框libs/components/video-editor/视频编辑器约 500 个源文件libs/components/pagescene/3D 场景编辑器内部有完整的架构说明 AGENTS.md除 UI 组件外还有三类隐形微包支撑整个应用API 层libs/api/ 和 libs/api-enums/ 封装后端请求与枚举与 Rust 侧 crates/api_clients/ 的客户端一一对应Tauri 桥接层libs/tauri-api/、libs/tauri-events/、libs/tauri-utils/ 负责 JS ↔ Rust IPC状态与领域库libs/state/credits/积分余额、libs/state/subscription/订阅状态基于 Zustand/Signals 实现。三、Nx Vite 如何接管构建与开发任务编排交给 Nx工作区配置见 frontend/nx.json注册了nx/vite、nx/js/typescript、nx/eslint三个插件为每个包自动生成dev/build/test/typecheck等目标target并通过namedInputs计算依赖缓存——只改了一个按钮组件其他 30 个包不会重新构建。日常开发只需三条命令详见 frontend/README.mdnpm ci npx nx dev artcraft # 启动 Vite 开发服务器端口 5173 npx nx build artcraft # 产出 Tauri 需要的 dist别名直连源码无需先构建依赖这是本 Monorepo 最巧妙的设计。frontend/tsconfig.base.json 为每一个微包声明了路径别名storyteller/ui-button: [libs/components/button/src/index.ts], storyteller/api: [libs/api/src/index.ts]App 的 vite.config.ts 通过vite-tsconfig-paths加载这份配置于是开发环境和生产构建都直接吃 TypeScript 源码不需要先build40 多个库。README 中明确写道The desktop build does not require library dist/ outputs or a separate library build.每个包的package.json也用exports的development条件做了同样的事如 libs/api/package.json开发时解析到src/index.ts打包时解析到dist/index.js。四、避免重复状态的打包细节Monorepo 里最经典的坑是同一个状态库被多个包各打包一份运行时状态互相隔离。ArtCraft 用两处配置化解libs/shared-vite-config.ts库构建时把 React、preact/signals-*、zustand 以及所有storyteller/*工作区包全部 externalize防止库之间互相打包、状态分裂App 侧resolve.dedupe对react、preact/signals-core等强制去重保证全局单例。另外 frontend/tools/performance/ 内置了性能基准工具链benchmark、compare、browser fixture配合 docs/performance.md 和前后对比数据让 40 包的包体变化可量化、可回归。五、新手本地跑起来的最快路径安装 Node.js 20 与 Rust/Tauri完整清单见 _docs/dev_setup.md一条命令同时拉起前端与桌面端./script/artcraft/unix_dev.shscript/artcraft/unix_dev.sh自动分配端口并注入 Tauri 配置只想看前端时在frontend/下执行npm ci npx nx dev artcraft即可如遇Failed to resolve entry for package storyteller/api类报错可运行 frontend/build_modules.sh 手动构建内部依赖脚本自述这是一个临时补丁。六、我们能从这套架构学到什么 ✅一组件一目录 统一前缀storyteller/ui-*命名让依赖关系一眼可辨40 包也不会乱别名直达源码tsconfig paths vite-tsconfig-pathsexports条件三者配合省掉先构建库再跑 App的心智负担Nx 管编排Vite 管执行Nx 负责缓存与任务图Vite 负责热更新与打包各取所长状态库全局去重dedupe external 双保险避免生产构建中的重复状态 Bug。如果你想深入某个具体微包建议从 libs/components/pagescene/AGENTS.md 入手——它是一份写得极详细的单包架构说明书也是这个项目对微包文档化的最佳示范。【免费下载链接】artcraftArtCraft is an intentional crafting engine for artists, designers, and filmmakers项目地址: https://gitcode.com/GitHub_Trending/ar/artcraft创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考