GitHub Copilot應用中的堆疊會話和拉取請求
本文介紹了作者如何使用GitHub Copilot應用的堆疊會話和拉取請求功能,成功現代化了一個古老的前端項目。通過分階段處理依賴升級、樣式重構和組件替換,避免了範圍蔓延,實現了高效的代碼迭代。
近期,GitHub博客上的一篇文章詳細介紹瞭如何利用GitHub Copilot應用中的堆疊會話和堆疊拉取請求功能,將一個古老的前端代碼庫現代化。作者分享了自己從2014年開始維護的一個個人儀表盤應用,該應用長期使用React 15(2016年發佈)、Less CSS預處理器和舊版react-bootstrap,依賴庫早已過時,導致維護困難。在嘗試手動更新失敗後,作者決定藉助AI工具進行重構。
第一步,作者嘗試在GitHub Copilot的Plan模式下提出一次性計劃,希望全面現代化前端,包括改用Tailwind或純CSS、移除Less、優化可訪問性和響應式設計,並升級依賴。然而,由於未曾意識到之前曾嘗試過部分更新並保留了一箇舊dev分支,初始計劃並未成功。
作者意識到問題後,將工作切換到dev分支,而不是從主分支重新開始。Copilot自動創建了新會話,關閉了最初的拉取請求,並將樣式決策移植到對dev分支的更改中。這一步展示了堆疊會話的優勢:可以輕鬆切換上下文,而不會丟失進展。
在測試過程中,作者發現了react-bootstrap中的遺留警告(如findDOMNode和componentWillReceiveProps),這些來自舊版依賴。於是再次使用Plan模式討論是否升級或替換react-bootstrap,最終決定完全移除該庫,改用現代替代品。
為了避免範圍蔓延,作者沒有將所有更改合併到一個巨型拉取請求中,而是利用堆疊會話功能:先為當前工作創建一個拉取請求,然後基於該分支啓動一個新會話,專門處理react-bootstrap的替換工作。Copilot自動生成了堆疊的拉取請求鏈,每個請求基於前一個的分支,最終合併到dev分支。
文章最後展示了堆疊會話的界面截圖:最上層是倉庫,接着是“前端現代化”會話,其下嵌套了第一個未成功的拉取請求(紅色圖標),然後是成功的工作拉取請求,最下層是進行中的react-bootstrap替換的草稿拉取請求。作者感嘆,軟件開發從未如此順暢,堆疊會話和拉取請求使得代碼重構變得輕鬆可控。