Diffusion Studio本地构建完整指南：Monorepo搭建、开发调试与桌面端打包-港品优选

Diffusion Studio本地构建完整指南：Monorepo搭建、开发调试与桌面端打包

【免费下载链接】editorAn open-source video editor built for agents. Edits become code, code becomes video.项目地址: https://gitcode.com/gh_mirrors/editor94/editor

Diffusion Studio 是一款专为 AI Agent 打造的开源视频编辑器，核心理念是"编辑即代码，代码即视频"——你在时间线上做的每个改动都会写回真实的 SolidJS 代码。本文带你完成 Diffusion Studio 本地构建的完整流程：从零搭建 Monorepo 开发环境、启动开发调试，再到打包出可分发的桌面端安装包。

一、动手之前：看懂 Monorepo 结构

Diffusion Studio 采用 npm workspaces 管理整个仓库，package.json 中只声明了两个工作区：

apps/*—— 可直接运行的三个应用
packages/*—— 被应用共享的 8 个核心库

路径	包名	职责
`apps/web`	`@diffusionstudio/web`	编辑器 UI（Solid + Vite）
`apps/desktop`	`@diffusionstudio/desktop`	Electron 桌面壳
`apps/cli`	`@diffusionstudio/cli`	`dapi`命令行工具
`packages/runtime`	`@diffusionstudio/runtime`	无头编辑器运行时（ECS 世界、媒体解码）
`packages/jsx`	`@diffusionstudio/jsx`	创作 API：元素词汇表与生成式资源
`packages/reconciler`	`@diffusionstudio/reconciler`	把项目代码调和到运行时实体树
`packages/assets`/`encoder`/`koota-solid`/`agent-chat`/`dapi`	—	资产库、离线编码、Solid 绑定、Agent 聊天、MCP 工具

更详细的说明见 README.md 的 "Repository layout" 一节。理解这张地图后，你后面每一步构建命令都能对号入座。

二、前置要求与一键安装

🛠 环境要求很简单，只需Node 20+ 与 npm。

git clone https://gitcode.com/gh_mirrors/editor94/editor cd editor npm install cp apps/web/.env.example apps/web/.env

两个容易踩的坑：

.env是必需的。apps/web/.env.example 提供了一份可直接使用的默认值，复制为apps/web/.env后应用才能运行；打包桌面端时 vite.config.ts 还会强制校验VITE_SUPABASE_URL与VITE_SUPABASE_ANON_KEY是否存在，缺失会直接报错。
npm install末尾会自动执行patch-package，把 patches/ 里的补丁应用到第三方依赖上，属正常现象。

三、开发调试：一条命令启动完整工作流

安装完成后，最常用的一条命令是：

npm run dev

它实际调用的是 scripts/dev-desktop.mjs，内部串起了四个步骤：

构建 CLI：保证链接进 PATH 的dapi与 App 内无头服务代码一致；
启动 Vite 开发服务器（http://localhost:5173，端口固定为 5173），并自动清理由上次崩溃残留的旧 Vite 进程，避免"端口被占用"报错；
等待服务器就绪后构建桌面壳（esbuild 打包main.js/preload.js/agent-host.mjs）；
用electron-forge start启动 Electron，加载 5173 端口的页面。

按Ctrl-C会优雅终止整棵进程树。Vite 侧开启了Cross-Origin-Opener-Policy等响应头，这是 WebGPU 与共享内存特性所必需的，见 apps/web/vite.config.ts。

如果只想调 Web 端、不起 Electron，可以改用：

npm run dev:web_v1

四、让 dapi CLI 跟随最新代码

桌面端内置的 MCP 工具与独立的dapiCLI 共用一套实现。想让终端里的dapi始终指向本地构建产物，只需链接一次（以 macOS/Homebrew 为例）：

npm run symlink:create --workspace=@diffusionstudio/cli

链接指向的是 CLI 构建产物，而npm run dev每次启动都会重新构建它，因此dapi永远运行最新代码。细节见 apps/cli/package.json。

五、桌面端打包：从源码到 DMG 安装包

开发调试满意后，就可以打正式包了：

npm run make

apps/desktop/package.json 中的make脚本依次执行：

阶段	命令	作用
1. 类型检查	`npm run check`	全工作区`tsc --noEmit`
2. 打包主进程	`build:main`/`build:preload`	esbuild 输出 CJS 产物到`dist/`
3. 构建 Web 前端	`build:web`	Vite 以`--mode desktop`输出到`apps/desktop/web/`
4. 资源暂存	`stage:cli`/`stage:runtime`/`stage:docs`	把`dapi`、运行时与文档放入`Resources/`，随应用分发
5. 制作安装包	`electron-forge make`	由 forge.config.ts 驱动 MakerDMG / MakerZIP

最终会产出形如Diffusion-Studio-arm64.dmg的安装包，拖拽式安装界面长这样：

📦 关于签名：配置了APPLE_ID、APPLE_PASSWORD、APPLE_TEAM_ID三个环境变量时会执行公证；本地自测可用SKIP_SIGN=1跳过签名。

六、版本发布与日常质量检查

发布新版本只需一条命令，scripts/release.mjs 会同步更新根目录与三个应用包的版本号、刷新 lockfile，并提交并打上vX.Y.Z标签：

npm run release patch

推送到远端（含 tag）后，即可触发后续的发布工作流。

日常提交前，建议跑一遍质量检查三件套：

npm run check # 全工作区类型检查 npm run lint # 全工作区 ESLint npm run test # 运行各工作区测试

七、常用命令速查表

命令	场景
`npm install`	首次安装依赖（自动打补丁）
`npm run dev`	一键启动桌面端开发
`npm run dev:web_v1`	仅启动 Web 开发服务器
`npm run build`	构建 Web 生产包
`npm run make`	构建并制作桌面安装包
`npm run release <patch\\|minor\\|major>`	升版 + 打 tag

至此，你已经掌握了 Diffusion Studio 本地构建的完整链路：Monorepo 环境搭建、开发调试与桌面端打包。剩下的就是打开编辑器，让 Agent 帮你剪一支真正的视频了。

【免费下载链接】editorAn open-source video editor built for agents. Edits become code, code becomes video.项目地址: https://gitcode.com/gh_mirrors/editor94/editor

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析