技术速递｜GitHub Copilot App 中的堆叠会话与拉取请求

作者：Cassidy Williams

排版：Alan Wang

了解我是如何使用 GitHub Copilot 应用中的堆叠会话和拉取请求，对我一个旧代码库进行现代化改造。

我想让你花一点时间看看这张截图，它来自 GitHub Copilot App。它很小，图标很多，但它讲述了一个我真的非常兴奋的故事。

这张图是一组堆叠的会话。它们是一系列在同一个仓库中的任务，每个会话都建立在前一个会话之上。

下面会详细介绍这些内容，但首先，为什么这张截图这么神奇？我们要回到十多年前。我的这个仓库是我个人应用的旧仓库。我最早是在 2014 年末左右创建的，它多年来一直按我想要的方式运行（它就像我家里日历、智能设备和任务管理的个人"生活"仪表盘）。我偶尔会做一些更新，但这些更新越来越难以处理。

我的依赖项已经变得非常老旧。老旧得有点尴尬。我当时使用的是 React 15（发布于 2016 年）、Less 作为 CSS 预处理器，以及大约那个时期的 react-bootstrap 版本。对，你没看错。Bootstrap。那真的是很老了。

在 AI 出现之前，要把这个一团糟的东西理清，可能需要花我几周时间。我之前尝试过，但也放弃过。它不是世界上最大的应用，但也刚好大到足够痛苦，而且收益远远不值得付出这么大代价。

但......现在我们确实有 AI 了，所以我启动了 GitHub Copilot App，添加了这个仓库，并开始动手了。

第一步：我能一次性完成吗？

不能。

我还是尝试了一下！这是我在 Plan 模式下使用的提示词：

I want to modernize the frontend for this project. I first wrote a lot of this code more than 10 years ago and it should be cleaned up a lot. I'm thinking we start either using Tailwind or just vanilla CSS (please vet everything to help me decide), we remove all Less (etc), and clean everything up accessibility-wise and responsiveness-wise. Right now I really want to just focus on styles, and then slowly but surely organize and consolidate the React functionality. It might be worth modernizing dependencies, too. Let's come up with a plan around this before diving in.

Nothing is sacred, it's okay if we have to completely start over some parts

Links should change colors and add underlines on hover/focus

Input boxes should have a smaller border radius in general, and their labels should be cleaner

There should be good wrapping and a max-width on containers so that an input box doesn't span an entire wide monitor.

我把它丢给 Claude Opus 4.8，并让 GPT-5.5 进行了一轮 Rubber Duck review，还进行了很多来回沟通来做决策。一旦我达到了满意的状态，我点击了"go"，让应用在我的项目里大干一场，看看它是否可行！

结果......不行，而且这是我的错。

第二步：意识到我之前已经尝试过这件事

所以，记得我之前说过我"尝试过但放弃了"吗？原来，我实际上有一个旧的 dev 分支，里面真的已经现代化了部分内容，我之前却没有意识到兼容性问题。

但这也不失为一件好事！

当我在这个会话中运行新版本时，我发现自己是在从 main 分支分出，但我平时实际在使用的部署版本，使用的是我在 dev 分支上部分更新后的版本。所以，一些我为自己做出来的想要功能，需要纳入这组改动中。不过，这些改动刚好足够大，以至于我实际上需要把这些改动应用到 dev 分支上，才能保住我的一点理智，而不是把 dev 里的修改合并进 main。

在 AI 出现之前......天哪，这会让我在挫败感中抓狂。我承认这里也让我很沮丧。我已经花了时间和 tokens 试着让它跑起来，而且我以为自己的计划还不错。但！我能够通过一个简单的请求切换方向（并切换会话），这比我想象中更酷：

所有这些都没有白费！Copilot 为我新建了一个会话，关闭了我之前试图提交的拉取请求，并将我的样式决策移植到它正在应用到 dev 分支的改动中。

第三步：测试后的发现

哎呀，好吧，所以我有了一个不错的分支，也有一个我还算满意的拉取请求。开始测试后，我却忍不住注意到控制台里有一些旧警告。

当我看到旧的 findDOMNode 和 componentWillReceiveProps 引用时，我的心里充满了恐惧。这些函数我已经多年没有碰过了。啊。

这些引用在我的代码库里不算很多了，但它们在 react-bootstrap 里面。于是我又打开了 Plan 模式，因为我需要弄清楚是升级会可行，还是应该完全移除这个库：

Do you think we should remove react-bootstrap entirely (and replace with a modern alternative), or just upgrade/migrate existing components?

运行后，它给了我一个不错的计划，讨论了各种选项，并推荐直接替换整个库。

第四步：在另一个会话之上堆叠会话

我需要确保我的改动不会受到现有工作的影响，但 react-bootstrap 替换工作感觉像是对当前工作的一种相当大的范围扩张。

我发现，在很多智能体工程工作中，这种范围扩张特别难以避免。因为我不需要自己写所有代码，所以很容易诱使我去提交一份 10,000 行的巨型拉取请求，处理我想做的所有事情！这其实只是另一种形式的拖延，哈哈。

所以，我没有为自己做一个超大拉取请求来测试，而是把它拆成了一个新的会话，并给它输入了这样的提示：

Let's make a pull request for the existing work, and then start a new session for this react-bootstrap replacement work that will branch off this existing work here, and be a separate pull request to merge into dev after this one.

这部分感觉太神奇了，足以让我想写这篇博客。GitHub Copilot App：

为我当前所有改动创建了一个拉取请求，基于 dev 分支
为 react-bootstrap 移除工作创建了一个"堆叠会话"（它采用了之前的上下文，创建了一个在现有会话之后运行的会话，制定了计划，让我批准了计划，然后开始运行）
按照我现有的工作，创建了一个堆叠式拉取请求

这太酷了。堆叠会话和堆叠式拉取请求？这就是未来吗？

是的。

如果你不清楚"堆叠"这个名字是什么意思：堆叠是一系列在同一仓库中的拉取请求，每个拉取请求都指向其下方拉取请求的分支，形成一个有序链条，最终落到你的主分支上。

在我的情况下，不仅会话彼此跟随，而且它们的改动也跟随。

第五步：与堆叠的拉取请求一起扬帆远航

我知道我对这件事的兴奋有点调侃意味，但我的开心是真诚的。能如此轻松地交付这些改动，对我这个长期忽略旧代码库的人来说，真是一种愉快的体验。

让我们再看一次第一张截图：我来逐一解释。

在顶部，你可以看到我拉入的仓库。
接下来"Frontend modernization" 是初始会话的名称。
下一层嵌套的是第一次拉取请求尝试，最终我们没有发布它（因此有红色图标）。
同一层级的下一个嵌套项是我们在 dev 分支上获得一个可用拉取请求的地方。
下面那一层嵌套会话是正在进行中的草稿拉取请求，其中包含 react-bootstrap 的改动。

软件开发从来都不是什么顺风顺水的事。但这次项目因为这些现代工具变得容易了很多。

如果你想为自己的代码库做现代化改造，不妨试一试！

在 GitHub 上提交代码的任何位置查看拉取请求堆栈，并在 GitHub Copilot App 中查看堆叠会话 >