git worktree 快速上手：前端并行开发实践

[kuikuiGe]

背景

前端开发里，你大概率都遇到过这些场景

1️⃣ 写了一半的功能，被紧急 Bug 打断

git stash 当下确实方便，回来之后，自己都未必记得刚刚做到哪了。

2️⃣ 想同时跑两个分支对比效果

组件改完后想和旧版本对比，但同一个项目目录一次只能检出一套代码。

3️⃣ 想帮同事 Code Review，但自己的代码还没提交

切分支怕丢进度，不切分支又没法直接看。

4️⃣ 前端项目依赖重，克隆一次要 3 分钟

npm install 的时间，够泡一杯咖啡了。

5️⃣ 想并行处理多个任务，但磁盘空间不够

每多克隆一份项目，往往就多一份 500MB 的 node_modules。

这些问题，git worktree 基本都能一起解决。

快速上手

准备工作

# 先创建一个测试项目
mkdir my-project
cd my-project
git init

# 创建第一次提交
echo "console.log('Hello World');" > index.js
git add .
git commit -m "Initial commit"

# 推送分支
git push origin main

紧急修复线上问题

# 基于 main 创建一个 hotfix worktree
git worktree add ../my-project-hotfix -b hotfix/bug main

# 查看下当前 worktree 列表
git worktree list

现在有2个worktree：

# 进入 my-project-hotfix 目录
cd ../my-project-hotfix

# 开始修 Bug
echo "console.log('fix:修复问题');" > fix.js
git add .
git commit -m "fix:修复问题"

# 推送分支
git push origin hotfix/bug

# 在主 worktree 合并 PR
cd ../my-project
git merge hotfix/bug
git push origin main 

# 修复合并到 main 后，删除这个 worktree
git worktree remove ../my-project-hotfix

新功能并行开发

# 基于 main 再开一个并行开发分支
git worktree add ../my-project-feature -b feature/another-task main

现在有2个worktree：

# 进入新的 worktree 继续开发
cd ../my-project-feature

# 开始新功能开发
echo "console.log('feat:新功能');" >> index.js
git add .
git commit -m "feat:新功能"

# 推送分支
git push origin feature/another-task

# 在主 worktree 合并 PR
cd ../my-project
git merge feature/another-task
git push origin main

# 删掉这个 worktree
git worktree remove ../my-project-feature

常用命令

# 查看当前有哪些 worktree
git worktree list

# 查看更详细的信息（包含最后一次提交）
git worktree list --verbose

# 新增一个 worktree
git worktree add ../my-project-feature -b feature/new-task

# 删除一个 worktree（如果不想手动删除文件夹）
git worktree remove ../my-project-feature

# 如果你直接删了文件夹，比如在 Finder 里删了，清理残留记录
git worktree prune

注意

1. 不要把 worktree 放在项目目录内部，IDE 可能会把它也当成项目根目录，导致索引混乱，或者重复显示文件。

参考

1. https://stevekinney.com/courses/ai-development/git-worktrees
2. https://ddev.com/blog/git-worktree-contributor-training/