LearnGitBranching Git 可视化教程：34 个关卡搞懂提交、分支与变基
【免费下载链接】learnGitBranchingAn interactive git visualization and tutorial. Aspiring students of git can use this app to educate and challenge themselves towards mastery of git!项目地址: https://gitcode.com/gh_mirrors/le/learnGitBranching
在终端敲完git rebase，你确定知道它到底改了什么吗？LearnGitBranching 是一款免费的交互式 Git 可视化工具与关卡式教程，它把每一次 commit、merge、rebase 都变成会动的提交树动画，让你用 34 个关卡亲手"看穿"Git 的运作方式，而不是靠死记命令。
🧭 项目速览：它到底解决了什么问题
先说结论：命令行只能告诉你命令执行完了，LearnGitBranching 告诉你命令做了什么。
它是一个 100% 运行在浏览器里的 Git 仓库可视化器 + 沙盒 + 教学关卡系统。你在底部的输入框敲入命令，旁边的提交树会实时更新，分支指向哪、HEAD 落在哪，一目了然。
和传统学习方式的对比：
| 学习方式 | 优点 | 短板 |
|---|---|---|
| 图文教程 | 概念解释细致 | 提交树停留在纸面，缺乏直觉 |
| 真实项目里练手 | 场景最真实 | 试错成本高，搞乱了很难恢复 |
| LearnGitBranching | 即时可视化 + 随时重来 | 偏学习场景，替代不了真实项目 |
它最大的价值一句话：把"抽象的提交图"变成"可操作的实验台"，试错的代价约等于零。
🚀 快速上手：3 条路径任选其一
路径一：在线体验。直接搜索 LearnGitBranching 进入官方演示站点即可，有完整模式和演示模式两种入口，无需安装任何东西，打开就能敲命令。
路径二：本地构建（推荐想改源码或离线使用的人）。只需三步：
git clone https://gitcode.com/gh_mirrors/le/learnGitBranching cd learnGitBranching yarn install && yarn gulp fastBuild构建完成后，用浏览器打开仓库根目录生成的index.html就能玩了。相关流程说明可参考 README.md 和构建配置 gulpfile.js。
路径三：Docker 一键跑。如果你习惯容器化环境，一条命令拉起：
docker run -p 8080:80 ghcr.io/pcottle/learngitbranching:main然后访问http://localhost:8080。镜像构建脚本在 Makefile 里。
🎮 功能全景：按使用场景拆解
不按代码模块讲，按"你会在哪种场景用到它"来讲。
场景一：自由沙盒，随便折腾
应用默认启动在沙盒模式（源码见 src/js/sandbox/），预建了一个基础仓库。你可以：
- 输入任意 Git 命令观察提交树动画
- 敲
undo撤销上一条命令的影响 - 敲
reset回到干净状态，关卡中同样有效 - 用
git clone模拟远程仓库，体验本地与远端的双树结构
给同事做 Git 演示？切到沙盒模式现场输入命令，效果比 PPT 直观得多。
场景二：关卡闯关，系统过一遍 Git
输入levels查看全部课程与完成进度。34 个关卡按 7 个章节组织（定义在 src/levels/）：
- 基础篇（intro）：提交、分支、合并、变基四步走
- 高级篇（rampup）：detached HEAD、相对引用、撤销变更
- 移动提交（move）：cherry-pick 与交互式变基
- 杂项（mixed）：抓取单个提交、打 tag、
git describe - 高级话题（advanced）：多次 rebase、多父提交、选择性变基
- 远程篇（remote）：clone、fetch、pull、push、协作模拟，共 16 关，目录在 src/levels/remote/
附加彩蛋是"Git 高尔夫"：每个关卡记录你用了多少条命令，去挑战官方记录吧。
场景三：自己造关卡，把知识传出去
输入build level，对话框会一步步引导你定义起始状态、目标状态与提示文案，最后生成一段 JSON。你可以把它分享给别人直接import level导入，或者通过 URL 参数分发——这意味着团队内部可以沉淀出属于自己工作流的练习关卡。构建逻辑在 src/js/level/builder.js。
场景四：一键分享复现现场
通过commandURL 参数，你可以把任意一组命令编码进链接，别人打开页面会自动回放这些操作。配合NODEMO参数跳过开场引导，非常适合在文章或讲义里嵌入"可运行的 Git 演示"。
场景五：多语言界面
内置 20 多种语言（含简体中文、日语、韩语、法语、俄语等），界面与关卡文案都做了本地化，定义集中在 src/intl/ 下，切换语言即可使用母语闯关。
👥 适用人群与典型场景
- 零基础的 Git 新手：从第一个 commit 开始建立"提交就是一张图"的直觉，比背命令表高效。
- 科班学生：课程作业前突击 rebase、merge 概念，几分钟就能把知识串成线。
- 想补齐盲区的中高级开发者：
reset --hard到底动没动工作区？pull --rebase和pull差在哪？进沙盒里亲手验证一次就忘不了。 - 技术负责人与讲师：沙盒模式就是现成的讲台，现场输入命令，全员看到同一棵会动的提交树。
🏗️ 技术栈一览
| 层 | 选型 |
|---|---|
| UI 框架 | React 17 + Backbone + Flux（状态管理） |
| 可视化 | Raphael（SVG 绘制提交树与动画） |
| DOM 工具 | jQuery |
| 构建 | Vite 开发 + Gulp 生产构建 |
| 包管理 | Yarn |
| 测试 | Jasmine |
| 部署 | 纯静态页面，无后端、无数据库、无 AJAX |
整个应用是 100% 客户端的——生产版本就是一个 HTML 加一堆 JS/CSS，所以它才能被打包成 Docker 镜像随手跑起来。命令解析核心在 src/js/git/，可视化层在 src/js/visuals/。
⚠️ 避坑指南与进阶建议
- 犯错就回退，别慌。
undo回退一步，reset推倒重来。沙盒里的任何操作都可逆，大胆试。 - 先沙盒，后关卡。对某个命令没把握时，先在沙盒敲一遍看动画，再进关卡做约束训练，通过率会高很多。
- 用 Git 高尔夫逼自己精简。完成关卡后回头看：能不能少一条命令？这是养成"最短路径思维"的好办法。
- 别只刷基础篇。远程篇的 16 个关卡（fetch/push 的参数组合）才是团队协作里的重灾区，值得反复练。
- 遇到可疑 Bug？在浏览器控制台执行
debug_copyTree()，能导出当前完整状态，方便提 issue 时精确复现。 - 想参与贡献？先看 CONTRIBUTING.md，用
yarn gulp build跑测试和 lint 后再提交。
🎯 写在最后
走完 34 个关卡，你会带走这些能力：看懂任意一棵提交树、熟练运用分支/合并/变基三件套、在真实场景下正确选择 fetch 与 pull、敢于修改提交历史而不恐惧。这些能力会直接迁移到你每天的项目里。
别收藏了——现在打开沙盒，敲下你的第一条git commit，让提交树先动起来吧。
【免费下载链接】learnGitBranchingAn interactive git visualization and tutorial. Aspiring students of git can use this app to educate and challenge themselves towards mastery of git!项目地址: https://gitcode.com/gh_mirrors/le/learnGitBranching
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
