跳转至

视频脚本:15 分钟讲完 Claude Code 源码

时长:15 分钟 目标观众:前端工程师、想了解 Claude Code 内部实现的人 风格:边讲边截图、关键代码打码 录屏建议:OBS / ScreenFlow,1080p


📋 整体节奏

时间段 内容 时长
0:00-0:30 自我介绍 + 视频目标 30s
0:30-2:00 项目速览(数字、规模) 1.5min
2:00-5:00 阶段 1:入口 3min
5:00-7:00 阶段 3:状态管理(60 行 store) 2min
7:00-9:00 阶段 6:agent 循环(5 行核心) 2min
9:00-11:00 阶段 5:工具系统 2min
11:00-13:00 阶段 7:MCP 协议 2min
13:00-15:00 总结 + 学习资源 2min

0:00-0:30 | 自我介绍

画面:黑屏 → 渐变显示标题 "Claude Code 源码揭秘 · 15 分钟入门"

口播

大家好,今天用 15 分钟带你看懂 Claude Code 的源码。 我们看的是 dvxiaofan/cc-claude-code 仓库 —— 2026-03-31 源码泄露事件后的完整快照。 512,664 行 / 1902 文件 —— 一个超大型项目。 我会从前端工程师视角切入:把它当成"React 项目平移到 TTY"来理解。 准备好了吗?开始。


0:30-2:00 | 项目速览

画面:终端画面,跑 find . -name "*.ts" -exec wc -l {} + | sort -rn | head -10

口播

先看数字。50 万行 TS 代码。 5 个 >5000 行的"巨型文件" —— cli/print.tsutils/messages.tsutils/sessionStorage.tsutils/hooks.tsscreens/REPL.tsx40+ 顶层子目录 —— state/ hooks/ tools/ services/ bridge/ mcp/ 等等。

你看这个 state/store.ts —— 60 行。这就是 Claude Code 的状态管理核心。是的,60 行。 等会我讲。

画面切换ls src/ 滚动展示

口播

但反过来说,100+ 个 hooks43 个工具100+ 斜杠命令30+ 业务模块
任何一个点都够讲半小时。 今天我只讲 5 个最核心的,让你看完能找到自己的入口


2:00-5:00 | 阶段 1:入口链

画面:双层终端,左边 cli.tsx 头部,右边 main.tsx 头部

口播

先看启动。 用户输入 claude 回车,进程怎么起来? 不是一条线——是两条线

第一条 cli.tsx,是fast-path:调 --version 这种,根本不进主入口0 模块加载
这是性能优化 —— 短命命令不付 135ms 启动成本。

第二条 main.tsx,4683 行,是真正的入口
看头部 18 行 —— 注意这里有 startMdmRawReadstartKeychainPrefetch —— 启动期 prefetch。

这是关键main() 函数顶部不是空话,有立即执行。 这些 prefetch 并行跑在剩余模块导入时间里,省 65ms 启动时间

画面:箭头指向 Promise.all 模式

口播

任何大型 CLI 工具的启动优化都是这套:能并行的 IO 全并行。 Web 项目里 <link rel="prefetch"><link rel="preload">,CLI 里就是这种"启动期 prefetch"。

画面切换:路由箭头,cli.tsx → main.tsx → init.ts → replLauncher.tsx → REPL.tsx

口播

然后 init.ts 加载配置、初始化 telemetry。
replLauncher.tsx 把控制权交给 REPL.tsx
5 层入口 —— 不是"一个 main 函数包打天下"。


5:00-7:00 | 阶段 3:60 行 store

画面src/state/store.ts 完整 60 行全屏

口播

好,现在讲 Claude Code 最牛的设计。 这就是 state/store.ts —— 60 行。 是完整的 state management。Zustand 没引、Redux 没引、MobX 没引。 60 行手写。

画面:高亮 getStatesetStatesubscribe

口播

API 三个:getState() 读、setState(updater) 写、subscribe(listener) 订阅。 关键设计: 1. Object.is(next, prev) —— 引用相等不通知 listeners 2. onChange 同步钩子 —— 在 setState 内、通知 listeners 之前触发 3. Set 存 listeners —— 自动去重

对比 Zustand v4 —— 一模一样Claude Code 选了"最小够用"

画面切换AppStateStore.ts:89DeepImmutable<AppState>

口播

AppState 类型多大?365 行,40+ 字段。 包含 messages、tasks、mcp、attribution、permissions、settings、notifications、teammates 等等。

关键:DeepImmutable<T> 映射类型 —— 整个对象递归只读。 编译时防止 mutation,运行时不实际 freeze(性能考虑)。

画面AppStateStore.ts 头部 30+ import

口播

更有意思的是头部 import —— 你看,30+ 业务模块的类型全在这里读头部 import = 读整个项目的业务领域图。 这是大型项目的"类型中央集线器"模式。


7:00-9:00 | 阶段 6:5 行 agent 循环

画面query.ts:241queryLoop

口播

接下来讲 Claude Code 的"灵魂" —— 5 行 agent 循环

看这段:

async function* queryLoop(messages, ctx, ...) {
  while (true) {
    let toolUse = null
    for await (const event of stream) {
      if (event.type === 'tool_use') toolUse = event.tool
      yield event
    }
    if (!toolUse) return
    // 执行工具 + 继续
  }
}

画面:箭头指向 5 行

口播

5 行: 1. 死循环 2. 暂存 toolUse 3. 异步消费 stream 4. 抓 tool_use 5. 透传 yield

整个 Claude Code 50 万行代码的"agent 循环"逻辑,就是这 5 行。 其他都是工程化扩展:retry、compact、权限、metrics、telemetry。

关键模式async function* + for await 透传。 为什么不用 RxJS?—— 标准、轻量、零依赖。 为什么不用 callback?—— 难取消、难组合。

画面切换:mermaid 时序图

口播

完整流程: 1. 用户键入 → PromptInput → submit 2. REPL 调 query() async generator 3. query() 调 LLM API(流式) 4. 每个 token yield 给消费者 5. LLM 返回 tool_use → 执行工具 6. 工具结果注入回 messages 7. 下一轮 LLM

5 行 + 工程化 = 完整 LLM 循环


9:00-11:00 | 阶段 5:工具系统

画面src/tools/ 目录滚动展示

口播

工具系统是 Claude Code 的"杠杆点" —— 装一个新 MCP server = 0 行 Claude Code 改动。

43 个工具src/tools/,每个工具是个完整业务封装

画面FileEditTool/ 目录树

口播

FileEditTool/ 一个工具的 7 个文件结构: - FileEditTool.ts 主实现 - UI.tsx 渲染组件 - prompt.ts 喂给 LLM 的描述 - utils.ts 工具函数 - types.ts 类型 - constants.ts 常量 - commitValidation.ts(推测)校验

每个工具都是"业务领域封装"。 这就是为什么 Claude Code 能有 43 个工具 —— 模式高度统一。

画面切换BashTool/ 目录树(16 个文件)

口播

BashTool/最复杂的 —— 16 个文件。 为什么?因为它涉及安全:LLM 可以跑任意 shell 命令。 4 层防御: 1. 解析(理解命令) 2. 路径(理解操作什么) 3. 危险检测(rm -rf / 等) 4. 沙箱(兜底隔离)

这 4 层是纵深防御 —— 单层永远会被绕过


11:00-13:00 | 阶段 7:MCP 协议

画面src/services/mcp/ 23 文件

口播

最后讲 Claude Code 的"扩展协议" —— MCP(Model Context Protocol)。 Anthropic 推动的行业标准。

MCP 让 Claude Code 的工具无限扩展: - 装 GitHub MCP server → 多 5 个工具 - 装 Notion MCP server → 多 8 个工具 - 装内部 MCP server → 多 N 个工具

23 个 mcp/ 文件实现完整的 client: - 3 种 transport:stdio / HTTP+SSE / InProcess - 协议握手(initialize) - 能力交换 - 工具调用 - Elicitation(1.0 新特性,server 问 user)

画面client.ts 头部 30+ import

口播

关键设计:MCPConnectionManager(连接管理)+ MCPRouter(消息路由)。 业务层只看到 callTool(server, tool, input)不关心 transport

三大 transport 各有适用场景: - stdio —— 本地工具(spawn 子进程) - HTTP+SSE —— 远程服务 - InProcess —— Claude Code 内部(最高性能)

画面切换src/ink/ 50+ 文件滚动

口播

还有一个意外发现src/ink/ —— 50+ 文件 / 13306 行。 这是 Ink 框架的完整 fork —— React for CLI 的整个源代码。 Claude Code 因为没 package.json把 Ink 整个 fork 进来。 同样的故事:vendor/ 4 个 N-API 模块也是同样原因内嵌。


13:00-15:00 | 总结 + 学习资源

画面:黑屏 → 学习手册 SUMMARY.md 全屏

口播

总结一下。 Claude Code 5 万行 / 1900 文件,15 分钟讲不完。 但这 5 个核心懂了,你就懂 80%: 1. 入口链:5 层(cli → main → init → replLauncher → REPL) 2. 状态管理:60 行 store + 365 行 AppState 3. agent 循环:5 行 async function + 工程化 4. 工具系统:7 文件结构 + 4 层防御 5. MCP 协议*:行业标准的扩展方式

画面切换learn_doc/ 目录树

口播

我把这次研究做成了完整的学习手册。 46 个 .md 文档,18,000+ 行 markdown。 包含: - 7 阶段文档 - 17 个跨阶段专题 - 5 个深度拆解 - 5 个速查手册 - 4 个 mermaid 可视化 - 4 个练习答案 - 2 个深度分析 - 79 个自动化测试

完整路径在 learn_doc/SUMMARY.md

画面切换how-to-read-500k-loc.md

口播

还写了"如何读 50 万行代码"方法论。 5 阶段:地图 → 入口 → 核心抽象 → 关键流程 → 边角。 不按顺序读,按依赖读不读完,理解

仓库地址在视频简介。 谢谢观看。

画面:黑屏 → 渐变显示 "Thanks for watching · github.com/dvxiaofan/cc-claude-code"


🎬 录屏建议

软件

  • OBS Studio(免费)—— 录制 + 直播都行
  • ScreenFlow(Mac 付费)—— 编辑方便
  • iMovie(Mac 免费)—— 简单剪辑

分辨率

  • 1920x1080(1080p)
  • 2560x1440(2K,更清晰)

音频

  • 麦克风距离嘴 20-30cm
  • Audacity 后期降噪
  • 背景音乐 -20dB(小声)

编辑

  • 开头 3 秒 = hook("15 分钟讲完 50 万行")
  • 结尾 10 秒 = CTA(仓库地址)
  • 章节标记:每个阶段切 1 次

上传

  • YouTube:技术视频,标"Claude Code / TUI / AI Agent"
  • B 站:国内受众
  • 描述区放:
  • 仓库地址
  • 时间戳(点击跳转)
  • learn_doc 路径

📝 字幕

可让 AI 工具(如 Whisper)自动转写。
或者直接基于本脚本生成 .srt 字幕文件。


🎯 后续内容

如果 15 分钟不够,可以做 30 分钟版(加): - 5:00 阶段 2:REPL 主循环(多 3 分钟) - 13:00 阶段 4:组件库 + 设计系统(多 3 分钟) - 25:00 阶段 8:错误处理 + 实战(多 5 分钟) - 30:00 总结 + Q&A

或者做系列: 1. 入门篇(本脚本,15 分钟) 2. 状态管理篇(20 分钟,深度讲 store + AppState) 3. agent 循环篇(20 分钟,深度讲 query + QueryEngine) 4. 工具系统篇(20 分钟,深度讲 43 工具 + BashTool 16 文件) 5. MCP 篇(20 分钟,深度讲 MCP 协议 + 23 个文件) 6. Bridge 篇(20 分钟,深度讲 IDE 集成 + 25 个文件)

总计 ~2 小时系列,可拆成 6 个视频。