【直播切片工作台】第3章:Monorepo 工程结构

简介: 本章详解Monorepo工程结构:pnpm workspace统一管理React前端,Go后端自治(go.mod),根package.json串联命令。目录严格分层——`cmd`/`internal`/`docker`/`docs`边界清晰,前后端路径与职责对仗,支持全栈并行开发。(239字)

第3章:Monorepo 工程结构

本章从仓库物理布局出发,讲清 pnpm workspace 如何同时管理 Go 后端与 React 前端、根 package.json 承担什么职责、以及 cmd / internal / docker / docs 的边界约定。理解目录约定后,任何新成员都能凭文件路径推断职责归属。

流程

仓库根目录只有六个条目:backend/frontend/docs/LICENSE、根 package.jsonpnpm-workspace.yaml。pnpm 把 frontend(还有未来可能的其他 JS 包)纳入统一 workspace 管理;Go 后端自带 go.mod,与 pnpm 互不干涉——两者通过根 package.json 的 scripts 串成一条命令链(例如一键安装、一键构建)。

后端内部遵循 Go 社区标准布局:cmd/ 放可执行入口(webserver 主服务、envinit 初始化工具、test 试验场),internal/ 放全部私有代码(编译器强制禁止外部导入,天然模块边界),docker/ 放镜像与编排,migrations/ 放 SQL 参考脚本,backend/docs/ 放 swaggo 生成的 Swagger 产物。前端的 src/ 按 pages / services / utils / components / layouts / routes / context / hooks 分层,与后端的 handler / service 命名形成心智对仗。

输入是「一个人维护全栈」的现实,输出是一套前端一条 pnpm 命令、后端一条 go 命令即可各自开发测试的并行工作流:

flowchart TD
    R[仓库根] --> B[backend: go.mod 自治]
    R --> F[frontend: pnpm workspace 包]
    R --> P[根 package.json: 串联脚本]
    B --> C1[cmd/webserver · cmd/envinit]
    B --> C2[internal/ 12 个领域包]
    F --> C3[src/pages 业务页面]
    F --> C4[src/services API 层]

实现

几个值得注意的工程细节:

  • .github/workflows/ci.yml 在根目录而非 backend,说明 CI 视角是整个 monorepo(第 50 章)。
  • .husky/pre-commit + lint-staged 提交前只对暂存文件跑 lint/format,前端代码质量门禁前移。
  • backend/internal/config/config.yaml 被 gitignore,仓库提供 config.yaml.example:本地密钥永不入库,示例文件与新配置项同步维护是仓库纪律(README 明确要求)。
  • .cursor/rules/toast-notify.mdc:为 AI 辅助编码准备的规则文件,约束前端提示组件的使用方式——工具链配置也是工程的一部分。
  • cmd/test/main.go 充当临时实验入口,避免污染正式命令;正式入口保持极薄(webserver 的 main 只有装配逻辑,见第 5 章)。

前端的路径别名 ~/ 指向 src/vite.config.mts + tsconfig.json 双处配置),所以 import 全是 ~/services/http 风格,杜绝 ../../ 相对路径漂移。

📌 设计决策

  • pnpm workspace 而非把前端塞进根 package.json:版本与依赖隔离清晰,未来可加 e2e 包、shared-types 包。
  • backend 与 frontend 完全不共享构建产物:前后端仅通过 OpenAPI 契约(Swagger 页面)耦合,是典型的契约优先协作。
  • internal/ 而非 pkg/(顶层):所有代码都是应用私有,没有对外开源 SDK 的诉求。

代码示例

workspace 定义极简,只圈定 JS 侧:

# pnpm-workspace.yaml
packages:
  - frontend

根 package.json 把两侧常用动作收敛为脚本入口(节选示意):

{
   
  "name": "live-mixer",
  "private": true,
  "scripts": {
   
    "dev": "pnpm --filter base-ui dev",
    "build": "pnpm --filter base-ui build",
    "test": "pnpm --filter base-ui test"
  },
  "devDependencies": {
   
    "husky": "^9.0.0",
    "lint-staged": "^15.5.1"
  }
}

小结

  • 仓库 = Go 自治模块 + pnpm workspace 前端 + 根级 CI/Husky 门禁。
  • cmd/ 薄入口、internal/ 强边界、配置示例文件同步是三条硬纪律。
  • 前后端仅通过 OpenAPI 契约协作,目录结构对仗便于全栈切换。

思考题

  1. 若要抽出前后端共享的 TypeScript 类型(按 Swagger 生成),workspace 结构应如何扩展?
  2. cmd/test 这种试验入口长期存在会有什么风险?更好的替代是什么?

项目信息

  • GitHub仓库:github.com/Chyona/live-mixer
  • 项目案例:gogoshine.com
相关文章
人工智能 关系型数据库 语音技术
33 0
人工智能 JSON 自然语言处理
24 0
缓存 前端开发 JavaScript
27 0
机器学习/深度学习 数据采集 编解码
29 0
|
2月前
|
监控 中间件 API
【剪映小助手】音频时间线计算接口(Audio Timelines)
音频时间线计算接口用于草稿自动化中音视频时序分析,依赖requests、subprocess、Pydantic等模块,支持并发处理、流式下载与断点续传。含参数校验、错误重试及自动清理机制,OpenAPI为准。
220 12
|
2月前
|
JSON 缓存 人工智能
【剪映小助手】媒体处理接口
CapCut Mate 是基于 FastAPI 的剪映自动化媒体处理接口,支持视频、音频、图片、贴纸的批量添加与轨道管理,提供草稿创建/保存/获取及标准化错误处理,助力高效、可控的AI视频编辑流程。(239字)
|
4月前
|
缓存 监控 API
【开源剪映小助手】媒体处理功能
CapCut Mate是基于剪映的专业视频编辑辅助工具,提供视频、音频、图片、字幕的智能添加、处理与时间线管理。采用FastAPI架构,集成UI自动化控制、多级缓存及异步任务调度,支持微秒级精度编排与完善错误恢复,兼顾高性能与高可用性。(239字)
|
2月前
|
缓存 编解码 JSON
【剪映小助手】音频处理工具接口
这是一个基于FastAPI构建的音频时长获取API服务,支持MP3、WAV、M4A等多种格式。通过HTTP接口接收音频URL,调用ffprobe解析元数据,返回微秒级精确时长。具备断点续传、异常处理、临时文件清理等特性,适用于视频编辑、媒体资产管理等场景。(239字)
|
4月前
|
Linux 测试技术 开发者
【开源剪映小助手】开发者指南
capcut-mate 是开源剪映自动化工具,基于 FastAPI + Electron 构建,支持跨平台草稿管理、媒体处理与视频导出。采用分层架构、条件依赖与优雅降级机制,确保 Windows/Linux 兼容性与一致开发体验。(239字)
|
4月前
|
存储 缓存 前端开发
【开源剪映小助手】代码结构说明
本项目为CapCut Mate(剪映助手)后端与桌面客户端一体化方案,采用“FastAPI(Python)+ Electron+React”混合架构。后端分层清晰(Router→Service→Utils),前端通过预加载脚本与IPC安全调用原生能力,支持草稿管理、媒体处理与视频导出,兼顾性能、可维护性与跨平台兼容性。(239字)

热门文章

最新文章