企业官网建设流程全解析

LearnGitBranching：Git 提交树可视化与交互教程工具

【免费下载链接】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 main回车之后，你能看到命令成功执行，却想象不出提交树在这一刻是怎么移动的。手册里有图，但图是静止的。LearnGitBranching 是一个面向新手和中级开发者的交互式 Git 学习工具：在浏览器里输入命令，提交树会当场以动画形式变化，同时提供成套的递进关卡和按命令数量计分的挑战机制。

🚀 先跑起来：让提交树动起来

先花五分钟感受效果，再谈原理。

免安装打开演示

项目 README 中提供了在线演示入口，演示版带有基础教程，完整入口则开放全部关卡。浏览器打开即可用，不需要任何本地环境。

本地构建三步

如果打算修改源码或提交贡献，需要把仓库克隆到本地、装依赖、再构建：

git clone https://gitcode.com/gh_mirrors/le/learnGitBranching cd learnGitBranching yarn install && yarn gulp fastBuild

第一条命令获取代码，yarn install下载依赖，fastBuild是跳过测试的快速构建。完成后在根目录打开生成的index.html即可游玩。

Docker 直接跑镜像

不想折腾 Node 环境时，用这条命令拉取预构建镜像并映射到本机 8080 端口：

docker run -p 8080:80 ghcr.io/pcottle/learngitbranching:main

构建镜像的详细说明写在 Makefile 里，docker build可以重新打包本地代码。

🧩 核心玩法拆解

沙盒模式怎么玩

启动后默认进入沙盒，系统已为你建好一个基础仓库。在输入框里敲任意 git 命令，提交树会逐帧更新。常用的三个退路：

• undo：撤销上一条命令造成的影响；
• reset：把树清空回初始状态，关卡里同样可用；
• git clone：模拟一个远程仓库，让你在本地树上就能练 push 和 fetch。

沙盒逻辑集中在 src/js/sandbox/index.js，不到 500 行，可以很快读完它如何记录命令前后的树快照来实现 undo。

关卡结构解析：7 个系列与 golf 计分

输入levels会弹出关卡列表，并标出你已经解出的部分。所有关卡按 src/levels/index.js 中的定义分成 7 个系列：intro、rampup、move、mixed、advanced、remote、remoteAdvanced。intro 系列 包含 commits、branching、merging、rebasing 四关，适合从零开始；rampup 系列覆盖 detached HEAD、相对引用、撤销变更；move 系列练 cherry-pick 和交互式 rebase；remote 系列则完整走一遍 clone、fetch、pull、push 的流程。

每个关卡还会统计你用了多少条命令（git golf 计分），做完一关后可以反复重打、刷新自己的步数。计分规则并非所有命令都算，见 src/js/commands/index.js 中的getCommandsThatCount。

分享状态与回放命令

给同事演示某个操作时不用口头描述：export tree能把当前提交树导出为 JSON，对方用import tree就能还原出同一棵树；share permalink则直接生成一个链接，打开后自动执行对应命令序列。"我刚才是这么操作的"从此可以精确复现。

自己造一个关卡

找不到想练的场景时，输入build level进入引导式构建器，它会逐步让你配置初始树、目标检查和通过条件，最后生成一段代表该关卡的 JSON；对方粘贴进import level即可直接玩。实现入口在 src/js/level/builder.js。

⚙️ 技术栈与扩展入口

底层是怎么做的

这是一个 100% 客户端项目：没有后端、没有 AJAX 请求，构建产物就是一个 HTML 加静态 JS 和 CSS。主要依赖是 React、Backbone 和 Raphael（负责可视化区域的绘制），构建链路为 Gulp 加 Vite，包管理用 yarn。src/js/git/commands.js 里声明了每条 git 命令的正则与执行逻辑，src/js/commands/index.js 负责解析并分发命令。

常见改法

两个扩展点最常用：新增关卡时，在src/levels/下加一个文件并在 src/levels/index.js 的序列里注册即可；新增命令时，在src/js/git/commands.js中声明配置。本地改完用yarn gulp fastBuild快速自测，提交前用yarn gulp build跑一遍测试与 lint。

❓ 高频问题

沙盒里为什么能用git clone？

它不是真实的网络请求，而是浏览器内模拟出的"远程"，用于在本地树上造一个可 push、可 fetch 的对象。整个 remote 系列关卡都建立在这个模拟之上。

树被我搞乱了怎么恢复？

undo逐步回退；彻底乱了就reset，沙盒和关卡内都有效。如果怀疑遇到了真 bug，可在浏览器控制台执行debug_copyTree()拷出当前树的状态快照，方便提交问题报告。

界面支持中文吗？

支持。关卡名与界面文案提供 zh_CN 等语言，系列名有对应中文显示（如 intro 显示为"基础篇"），国际化资源位于 src/js/intl/。

适合需要建立 Git 直觉的新手，也适合想系统练 rebase 与远程操作的中级开发者。建议先做完 intro 四关，再直接进 remote 系列把 push、fetch 的完整流程过一遍。

【免费下载链接】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