OpenReel Video Monorepo开发流实践pnpm workspaces、WASM构建与多包测试体系【免费下载链接】openreel-videoOpenReel Video - Professional browser-based video editor. Open source CapCut alternative. 100% browser-based, no installation, no cloud uploads, no watermarks.项目地址: https://gitcode.com/GitHub_Trending/op/openreel-videoOpenReel Video 是一个专业级浏览器端视频编辑器开源 CapCut 替代方案100% 在前端运行、无水印、无云端上传。这个项目最大的工程亮点是它用pnpm workspaces Monorepo把 4 个应用端 10 个共享包组织在一起配合AssemblyScript WASM 构建与多包 Vitest 测试体系一条命令就能完成依赖安装 → WASM 编译 → 本地开发的完整闭环。本文将带你快速看懂这套开发流的搭建方式。一、30秒跑通本地开发一条命令的 Monorepo 启动流程仓库根目录提供了一键启动脚本 start.sh它会自动完成三件事若node_modules不存在则执行pnpm install若 WASM 产物目录不存在则执行pnpm build:wasm启动 web 应用开发服务器http://localhost:5174# 首次本地运行clone 仓库后 git clone https://gitcode.com/GitHub_Trending/op/openreel-video cd openreel-video bash start.sh对新手来说这意味着无需关心 Monorepo 内部有多少包一条命令即可看到编辑器界面。二、pnpm workspaces4 个应用 10 个包的分层结构工作区定义工作区在 pnpm-workspace.yaml 中声明包含两个目录通配apps/*—— 可直接运行的应用端packages/*—— 被应用共享的库包应用端apps/应用技术栈说明openreel/webVite React 19浏览器版主编辑器部署到 Cloudflare Pagesopenreel/desktopElectron tsup桌面版内嵌 FFmpeg 与 MCP 服务openreel/studioVite Playwright动效创作端唯一带 E2E 测试的应用openreel/imageVite 背景移除模型图片处理端共享包packages/packages/下有 10 个包按职责分层核心层openreel/core —— 视频/音频编辑引擎144 个测试文件全部在这里也承载 WASM 编译UI 层openreel/ui —— 基于 Radix UI 的组件库以 peerDependency 声明 ReactAI 层openreel/agent、openreel/agent-runner提供openreel-agentCLI、openreel/creation-agentC 原生层openreel/creation-coreC20 引擎用 CMake 构建、openreel/creation-bindingsWASM/Node 绑定 CPU 回退、openreel/creation-schema领域层openreel/image-core、openreel/fxpkg关键技巧workspace:* 协议 源码直出包之间的依赖统一使用workspace:*协议如 agent/package.json 中依赖openreel/core且各包的main/exports直接指向./src/index.ts源码而非构建产物——开发时无需先 build 包配合 tsconfig.base.json 中的paths别名TypeScript 在 IDE 中即可直接跳转源码类型检查全 Monorepo 一条pnpm typecheck完成。三、WASM 构建AssemblyScript 编译三个音频算法模块OpenReel Video 用AssemblyScript一种可编译到 WASM 的类 TypeScript 语言实现高性能音频算法源码位于packages/core/src/wasm/模块源码产物FFT 快速傅里叶变换fft/assembly/index.tsfft.wasmWAV 音频解码wav/assembly/index.tswav.wasm节拍检测beat-detection/assembly/index.tsbeat.wasm编译由 core/package.json 中的三个build:wasm:*脚本完成最终聚合为根目录的pnpm build:wasmpnpm build:wasm # 等价于在 openreel/core 中依次运行 asc 编译三个模块每个脚本调用 AssemblyScript 编译器asc带--optimize --runtime stub参数生成优化后的.wasm文件产物直接落在src/wasm/*/build/目录内随源码一起被 web 应用消费。补丁管理对 FFmpeg WebAssembly 内核ffmpeg/core与ffmpeg/core-mt项目没有 fork 上游而是用 pnpm 的patchedDependencies机制将修改存放在 patches/ 目录并在 pnpm-workspace.yaml 中登记升级依赖时补丁可追溯、可复审。四、多包测试体系一个命令跑完 300 个测试测试分布全仓库约 300 个*.test.ts文件按包分布packages/core 144 个引擎核心 apps/web 67 个 packages/agent 33 个 apps/desktop 32 个 apps/studio 13 个另含 Playwright E2E 其余包 若干统一契约test / test:run每个包都在 package.json 中声明相同约定的脚本test——vitest监听模式用于本地开发test:run——vitest run单次运行用于 CI 与批量执行根目录 package.json 只需两条命令即可驱动整个 Monorepopnpm test # 等价于 pnpm -r test:run递归运行所有包的测试 pnpm test:watch # 等价于 pnpm -r test递归进入监听模式各包再用独立的 vitest 配置细化环境例如 core/vitest.config.ts 指定 node 环境、src/**/*.test.ts收集范围并开启 v8 覆盖率text/json/html 三种报告UI 类包web、studio、image则使用 jsdom 环境并配合 Testing Library 做组件测试。五、CI 流水线先验证、后构建CI 定义在 .github/workflows/ci.yml采用两阶段串行结构Test Linttest 任务pnpm install --frozen-lockfile→pnpm typecheck→pnpm lint→pnpm testBuildbuild 任务needs: test测试全部通过后执行pnpm build即 WASM 编译 web 应用打包同时配置了 concurrency 组同一分支的新推送会取消进行中的旧任务避免 CI 资源浪费。六、总结这套 Monorepo 开发流值得借鉴的 4 个点 应用与库物理分离apps/ vs packages/入口清晰workspace:*让依赖关系零版本漂移源码直出 tsconfig paths免去包必须先 build的心智负担WASM 与 TS 同仓同管理算法模块用 AssemblyScript 编写、构建脚本与包绑定start.sh兜底自动编译测试脚本契约化test/test:run 统一命名配合pnpm -r一条命令覆盖 300 测试CI 中类型检查 → Lint → 测试 → 构建顺序固定问题定位路径短如果你想深入贡献代码建议从 CONTRIBUTING.md 的协作规范入手再结合本文的分层结构图就能快速定位任意功能的所属包。【免费下载链接】openreel-videoOpenReel Video - Professional browser-based video editor. Open source CapCut alternative. 100% browser-based, no installation, no cloud uploads, no watermarks.项目地址: https://gitcode.com/GitHub_Trending/op/openreel-video创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
OpenReel Video Monorepo开发流实践：pnpm workspaces、WASM构建与多包测试体系
OpenReel Video Monorepo开发流实践pnpm workspaces、WASM构建与多包测试体系【免费下载链接】openreel-videoOpenReel Video - Professional browser-based video editor. Open source CapCut alternative. 100% browser-based, no installation, no cloud uploads, no watermarks.项目地址: https://gitcode.com/GitHub_Trending/op/openreel-videoOpenReel Video 是一个专业级浏览器端视频编辑器开源 CapCut 替代方案100% 在前端运行、无水印、无云端上传。这个项目最大的工程亮点是它用pnpm workspaces Monorepo把 4 个应用端 10 个共享包组织在一起配合AssemblyScript WASM 构建与多包 Vitest 测试体系一条命令就能完成依赖安装 → WASM 编译 → 本地开发的完整闭环。本文将带你快速看懂这套开发流的搭建方式。一、30秒跑通本地开发一条命令的 Monorepo 启动流程仓库根目录提供了一键启动脚本 start.sh它会自动完成三件事若node_modules不存在则执行pnpm install若 WASM 产物目录不存在则执行pnpm build:wasm启动 web 应用开发服务器http://localhost:5174# 首次本地运行clone 仓库后 git clone https://gitcode.com/GitHub_Trending/op/openreel-video cd openreel-video bash start.sh对新手来说这意味着无需关心 Monorepo 内部有多少包一条命令即可看到编辑器界面。二、pnpm workspaces4 个应用 10 个包的分层结构工作区定义工作区在 pnpm-workspace.yaml 中声明包含两个目录通配apps/*—— 可直接运行的应用端packages/*—— 被应用共享的库包应用端apps/应用技术栈说明openreel/webVite React 19浏览器版主编辑器部署到 Cloudflare Pagesopenreel/desktopElectron tsup桌面版内嵌 FFmpeg 与 MCP 服务openreel/studioVite Playwright动效创作端唯一带 E2E 测试的应用openreel/imageVite 背景移除模型图片处理端共享包packages/packages/下有 10 个包按职责分层核心层openreel/core —— 视频/音频编辑引擎144 个测试文件全部在这里也承载 WASM 编译UI 层openreel/ui —— 基于 Radix UI 的组件库以 peerDependency 声明 ReactAI 层openreel/agent、openreel/agent-runner提供openreel-agentCLI、openreel/creation-agentC 原生层openreel/creation-coreC20 引擎用 CMake 构建、openreel/creation-bindingsWASM/Node 绑定 CPU 回退、openreel/creation-schema领域层openreel/image-core、openreel/fxpkg关键技巧workspace:* 协议 源码直出包之间的依赖统一使用workspace:*协议如 agent/package.json 中依赖openreel/core且各包的main/exports直接指向./src/index.ts源码而非构建产物——开发时无需先 build 包配合 tsconfig.base.json 中的paths别名TypeScript 在 IDE 中即可直接跳转源码类型检查全 Monorepo 一条pnpm typecheck完成。三、WASM 构建AssemblyScript 编译三个音频算法模块OpenReel Video 用AssemblyScript一种可编译到 WASM 的类 TypeScript 语言实现高性能音频算法源码位于packages/core/src/wasm/模块源码产物FFT 快速傅里叶变换fft/assembly/index.tsfft.wasmWAV 音频解码wav/assembly/index.tswav.wasm节拍检测beat-detection/assembly/index.tsbeat.wasm编译由 core/package.json 中的三个build:wasm:*脚本完成最终聚合为根目录的pnpm build:wasmpnpm build:wasm # 等价于在 openreel/core 中依次运行 asc 编译三个模块每个脚本调用 AssemblyScript 编译器asc带--optimize --runtime stub参数生成优化后的.wasm文件产物直接落在src/wasm/*/build/目录内随源码一起被 web 应用消费。补丁管理对 FFmpeg WebAssembly 内核ffmpeg/core与ffmpeg/core-mt项目没有 fork 上游而是用 pnpm 的patchedDependencies机制将修改存放在 patches/ 目录并在 pnpm-workspace.yaml 中登记升级依赖时补丁可追溯、可复审。四、多包测试体系一个命令跑完 300 个测试测试分布全仓库约 300 个*.test.ts文件按包分布packages/core 144 个引擎核心 apps/web 67 个 packages/agent 33 个 apps/desktop 32 个 apps/studio 13 个另含 Playwright E2E 其余包 若干统一契约test / test:run每个包都在 package.json 中声明相同约定的脚本test——vitest监听模式用于本地开发test:run——vitest run单次运行用于 CI 与批量执行根目录 package.json 只需两条命令即可驱动整个 Monorepopnpm test # 等价于 pnpm -r test:run递归运行所有包的测试 pnpm test:watch # 等价于 pnpm -r test递归进入监听模式各包再用独立的 vitest 配置细化环境例如 core/vitest.config.ts 指定 node 环境、src/**/*.test.ts收集范围并开启 v8 覆盖率text/json/html 三种报告UI 类包web、studio、image则使用 jsdom 环境并配合 Testing Library 做组件测试。五、CI 流水线先验证、后构建CI 定义在 .github/workflows/ci.yml采用两阶段串行结构Test Linttest 任务pnpm install --frozen-lockfile→pnpm typecheck→pnpm lint→pnpm testBuildbuild 任务needs: test测试全部通过后执行pnpm build即 WASM 编译 web 应用打包同时配置了 concurrency 组同一分支的新推送会取消进行中的旧任务避免 CI 资源浪费。六、总结这套 Monorepo 开发流值得借鉴的 4 个点 应用与库物理分离apps/ vs packages/入口清晰workspace:*让依赖关系零版本漂移源码直出 tsconfig paths免去包必须先 build的心智负担WASM 与 TS 同仓同管理算法模块用 AssemblyScript 编写、构建脚本与包绑定start.sh兜底自动编译测试脚本契约化test/test:run 统一命名配合pnpm -r一条命令覆盖 300 测试CI 中类型检查 → Lint → 测试 → 构建顺序固定问题定位路径短如果你想深入贡献代码建议从 CONTRIBUTING.md 的协作规范入手再结合本文的分层结构图就能快速定位任意功能的所属包。【免费下载链接】openreel-videoOpenReel Video - Professional browser-based video editor. Open source CapCut alternative. 100% browser-based, no installation, no cloud uploads, no watermarks.项目地址: https://gitcode.com/GitHub_Trending/op/openreel-video创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考