拆解OpenChamber的Monorepo架构：React、Electron、VS Code扩展与Bun全栈技术解析

拆解OpenChamber的Monorepo架构React、Electron、VS Code扩展与Bun全栈技术解析【免费下载链接】openchamberAgentic Development Environment based on OpenCode AI agent项目地址: https://gitcode.com/gh_mirrors/op/openchamberOpenChamber 是一个基于 OpenCode AI 编码智能体的开源 Agentic 开发环境它用**一个 Monorepo多包仓库**同时支撑了 Web/PWA、Electron 桌面端、VS Code 扩展和移动端五种产品形态。这篇文章带你快速拆解它的 Monorepo 目录结构、React 前端、Electron 桌面运行时、VS Code 扩展与 Bun 全栈工具链看看这套架构是怎么一份代码多端复用的。一张图看懂 Monorepo 仓库结构OpenChamber 的仓库根目录就是整个 Monorepo 的调度中枢通过 Bun 的 workspaces 统一管理所有子包openchamber/ ├── packages/ │ ├── ui/ # 共享 React UI 组件库Web/桌面/移动/扩展共用 │ ├── web/ # Web 端Bun 服务 Express 代理 Vite PWA │ ├── electron/ # 桌面端Electron 主进程 打包分发 │ ├── vscode/ # VS Code 扩展Webview 本地桥接层 │ ├── mobile/ # 移动端Capacitor 封装 iOS/Android │ └── docs/ # 多语言文档站 ├── scripts/ # 全仓库脚本开发、构建、性能剖析 ├── vite.config.ts # 根级 Vite 配置代码分割策略 └── package.json # 工作区入口定义全部构建命令工作区定义packages/*所有子包都在packages/下统一脚本入口package.jsondev、build、test、lint全部在此编排官方文档入口docs/多语言文档源在 packages/docs/content/docs/packages/ui一个 React 组件库服务五种端整个项目最核心的复用点就是packages/ui。它以 main.tsx 为入口内部按职责组织目录职责src/components/聊天、会话、Git、终端、浏览器等 40 组业务组件src/stores/基于 Zustand 的全局状态管理会话、Git、权限、模型偏好src/lib/API、路由、主题、工作树、终端等 60 个纯逻辑模块src/apps/各端的应用壳MobileApp.tsx、VSCodeApp.tsxsrc/contexts/React Context 层如 ThemeSystemContext.tsx依赖上它同时引入了 React 19、Zustand、CodeMirror、Shiki 语法高亮和 Capacitor 插件见 packages/ui/package.json这意味着同一套 React 代码可以直接跑在浏览器、Electron 窗口、VS Code Webview 和手机 WebView 里——这正是多端一致体验的根基。packages/webBun 驱动的 Web 服务与 PWApackages/web是发布到 npm 的openchamber/web包一条命令openchamber就能在浏览器里跑起 AI 编码环境服务端server/index.js 用 Express 提供静态资源与 APIserver/lib/里有 450 个模块涵盖代理、隧道、终端node-pty、GitHub 集成等能力前端Vite React 构建 PWA支持安装为桌面应用CLI通过 bin/cli.js 提供startup enable、tunnel start等命令详见 packages/web/README.md它内部托管 OpenCode 服务并通过 proxy-headers.js 做请求代理实现本地服务器 → 手机/任意浏览器的无缝访问。packages/electron桌面运行时的薄壳设计桌面端采用了一个很聪明的思路——Electron 只做壳业务全部复用 web 包main.mjs 主进程 preload.mjs 预加载依赖中直接声明openchamber/web: workspace:*见 packages/electron/package.json打包由 electron-builder 完成配置集中在 package.jsonmacOS 出 DMG、Windows 出 NSIS 安装包、Linux 出 AppImage并内置electron-updater自动更新原生模块如终端由 rebuild-native.mjs 针对 Electron ABI 重新编译packages/vscodeWebview 承载同一套 UIVS Code 扩展packages/vscode/package.json在侧边栏注册openchamber.chatViewWebview渲染的正是packages/ui的 VSCodeApp.tsx。扩展源码 src/ 里一堆bridge-*-runtime.ts文件是桥接层bridge-fs-runtime.ts文件读写bridge-git-runtime.tsGit 操作bridge-proxy-runtime.tsAPI 代理sseProxy.tsSSE 事件流转发这样 UI 无需关心运行环境宿主差异全部被桥接层吸收。packages/mobile 与 Bun 全栈工具链移动端packages/mobile/package.json 用 Capacitor 把 Web 产物封装进 iOS/Android 原生壳ios/与android/目录就是原生工程Bun 承担全部工程角色包管理器bun install、测试运行器bun test、工作区调度bun run --filter、原生补丁bun-patches/ 中的 bun-pty 补丁构建优化根级 vite.config.ts 里有针对 Bun 隔离安装目录node_modules/.bun/的精细代码分割策略避免语法高亮等重量级依赖拖慢首屏质量门禁ESLint oxlint 自定义反垃圾规则tools/oxlint/、scripts/react-doctor.mjs、性能剖析脚本 scripts/profile-session.mjs总结这份 Monorepo 架构好在哪设计决策收益单一packages/ui组件库五种端 UI 与状态完全一致只写一次web 包独立发布 npm桌面/扩展/移动都能以workspace:*复用同一服务端Electron/扩展只做宿主壳业务逻辑零重复升级一处全部生效Bun workspaces 统一脚本一条命令完成全仓库构建、测试、类型检查桥接层隔离宿主差异UI 对运行环境零感知便于移植新平台如果你想深入某个方向可以从 AGENTS.md 了解开发约定从 packages/docs/ 阅读多语言官方文档或直接对照本文提到的相对路径在仓库中逐层探索。【免费下载链接】openchamberAgentic Development Environment based on OpenCode AI agent项目地址: https://gitcode.com/gh_mirrors/op/openchamber创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考