FreeCut 浏览器视频剪辑器架构解析features/runtime/infrastructure/shared 四层设计与功能边界之道【免费下载链接】freecutFreeCut is a professional-grade video editor that runs entirely in your browser. Professional video editing, zero installation. Create stunning videos with multi-track editing, keyframe animations, real-time preview, and high-quality exports.项目地址: https://gitcode.com/gh_mirrors/free/freecutFreeCut 是一款完全运行在浏览器里的专业视频剪辑工具支持多轨剪辑、关键帧动画、实时预览与高质量导出。它的代码库用一套清晰的四层架构——features、runtime、infrastructure、shared——把上千个源文件组织得井井有条并配有一套自动化脚本守护功能边界让新功能可以安全落地、老功能不被悄悄污染。本文将带你用最短的时间读懂这套设计。先看全貌四层架构一张表在src/目录下FreeCut 按职责划分了四个核心区域各层关系可以概括为上层调用下层功能之间不越界层级目录核心职责典型内容功能层src/features/按剪辑域划分的产品功能时间线、预览、关键帧、导出、媒体库运行时层src/runtime/播放与合成的引擎组合运行时、播放器时钟基础设施层src/infrastructure/GPU、存储、AI 等底层能力WebGPU 管线、OPFS 存储、场景检测共享层src/shared/跨功能复用的工具与状态时间工具、缓动曲线、状态管理这套分层的直观效果是当你想改动关键帧动画时只需在 src/features/keyframes/ 内打转而它依赖的 GPU 效果与工具函数则被隔离在各自负责的层里。功能层 src/features按剪辑域切分改一处不影响全身src/features/是产品功能的主战场每个子目录就是一个独立的剪辑域时间线timeline/、预览preview/、关键帧keyframes/、导出export/、媒体库media-library/、场景浏览器scene-browser/等。以时间线为例src/features/timeline/ 内部自己又分成stores/状态、hooks/React 钩子、components/界面、utils/纯逻辑、services/服务五个子目录——一个功能的脑、手、脸全部自包含。功能层最大的特点是功能与功能之间不能直接互相 import。这是 FreeCut 架构边界的第一道铁律也是它能在功能越做越多的情况下保持可维护性的关键。运行时层 src/runtime帧级精确播放的引擎舱src/runtime/ 只承载两样东西composition-runtime/组合运行时和player/播放器。为什么单独拎出来因为视频剪辑最核心的体验是帧级精确——播放、拖拽、回看都必须精确到帧。这一层封装了自定义的Clock时钟机制与合成运行时负责把多个轨道上的图层、效果、转场按帧调度起来。它只暴露稳定的接口给功能层调用例如 editor 通过 composition-runtime-contract.ts 访问它而功能层无需关心底层如何驱动画面。简单类比runtime就像汽车发动机舱你只需要踩油门调用接口不必了解活塞怎么运动。基础设施层 src/infrastructureGPU 与本地 AI 的地基FreeCut 的硬功夫——WebGPU 效果、WebCodecs 解码、OPFS 本地存储、本地 AI 分析——全部沉在 src/infrastructure/ 这一层GPU 系列gpu-effects/模糊、调色、扭曲等效果管线、gpu-transitions/转场、gpu-scopes/波形/矢量示波器、gpu-compositor/合成存储storage/workspace-fs/把工程、缩略图、波形、字幕全部写成磁盘上的普通文件做到本地优先、零上传AI 分析analysis/场景检测、字幕生成、llm/、interpolation/补帧把这类重资源、强技术约束的能力单独分层后功能层只需点菜而不必理解 GPU 管线细节——将来更换实现比如 WebGPU 降级到 Canvas改动被锁在这一层内。共享层 src/shared小而精的公共工具箱src/shared/ 存放被多个功能共同依赖的通用能力utils/时间换算 time-utils.ts、缓动 easing.ts、音频处理、state/跨组件状态、timeline/时间线通用逻辑如转场、标注、typography/文字排版。判断一段代码该不该进 shared 的简单标准至少两个功能层需要它。只被单一功能使用的工具就应该留在该功能自己的目录里——这正是四层设计防止 shared 变垃圾场的内建纪律。功能边界靠 deps 契约 自动脚本守护FreeCut 的功能边界不靠口头约定而由两部分机制强制执行1. deps 契约模式单一导入缝功能 A 想用功能 B 的能力时必须经过src/features/A/deps/下的契约模块。例如 editor 访问 timeline 的入口是 timeline-contract.ts它注释写着Single import seam for editor - timelineeditor 到 timeline 的唯一导入缝再由 timeline.ts 适配器把 store、hooks、UI 等聚合导出。2. 自动边界检查脚本仓库用 CI 脚本持续巡边check-feature-boundaries.mjs扫描所有 features 文件一旦发现功能间的直接跨目录 import绕过 deps立即报错并列出违规文件check-feature-edge-budgets.mjs为每条合法依赖边设定预算例如editor - timeline最多允许 73 处导入、2 个文件超了就要回炉重构——防止某条依赖边悄悄膨胀check-legacy-lib-imports.mjs、check-deps-contract-boundaries.mjs继续堵住其他绕行路径这套契约 预算 自动检查的组合拳让四层架构在团队与时间推进中不腐化新人也能放心改动。新手代码导读5 分钟找到你想看的模块你想看什么去哪里剪辑主界面如何拼装src/features/editor/ 与 src/routes/时间线交互与状态src/features/timeline/关键帧与贝塞尔曲线src/features/keyframes/导出与渲染队列src/features/export/播放/合成引擎src/runtime/GPU 效果与本地 AIsrc/infrastructure/边界规则如何落地scripts/ 下的 check-feature-* 脚本总结FreeCut 的四层架构可以浓缩成三句话features管产品runtime管引擎infrastructure管硬件shared管复用——每一层只回答自己领域的问题。功能之间必须走deps/契约禁止直接跨功能 import让editor 改了 timeline 会崩这类问题在设计上就难以发生。自动脚本持续巡边 依赖预算把架构纪律从靠自觉变成靠 CI。对于想深入 FreeCut 源码的新手记住一条主线就够了从一个功能如timeline入手看它自己的 stores/hooks/utils再看它通过deps/契约向外伸出的每一根线——你就能快速建立起对整个浏览器视频剪辑器架构的全局认知。【免费下载链接】freecutFreeCut is a professional-grade video editor that runs entirely in your browser. Professional video editing, zero installation. Create stunning videos with multi-track editing, keyframe animations, real-time preview, and high-quality exports.项目地址: https://gitcode.com/gh_mirrors/free/freecut创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考