阿里發(fā)布的新工具，直接幫你改代碼！網(wǎng)友：我的工作量又減輕了～

上一篇：一個90后員工猝死的全過程

來源：https://juejin.cn/post/6977259197566517284
Vue3 已經(jīng)出來有一段時間了，很多朋友早已熟讀了文檔，寫了好幾個 Demo，饞 Composition API 等新特性已久了。無奈，在實際工作中，大部分朋友還是不得不守著成千上萬行的 Vue2 老項目過日子，做一次框架升級就像給老房子裝修——念頭總是充沛，決心總是匱乏。

其實 Vue 團隊已經(jīng)盡可能地減少了破壞性更新，還提供了一份細致的遷移指南，條數(shù)不少，但定睛一看，大部分都是體力活，有些很簡單，比如異步組件要多包上一層：

還有一些就改起來有點麻煩，比如自定義指令生命周期的更名，和傳入?yún)?shù)的一些細微變化：


看到這種變化后，作為厭惡重復(fù)的程序員，已經(jīng)開始盤算著能不能寫個代碼幫我們把這些規(guī)則批量給改好了，當(dāng)然，寫轉(zhuǎn)換代碼的代碼要比寫網(wǎng)頁難上不少，還好我們之前已經(jīng)有了一個趁手的工具：GoGoCode。

作為一個更簡單的 AST 處理工具，能大大減輕轉(zhuǎn)換邏輯的書寫難度，簡直就是為了這事兒量身打造的！

于是我們梳理了遷移指南里提到的，附帶上 vue-router \ vuex 升級的一些 API 變化，配合 GoGoCode 書寫了近 30 條轉(zhuǎn)換邏輯，涵蓋了 Vue2 到 Vue3 代碼 break change 的大部分場景，這個程序可以幫助你一鍵把 Vue2 的代碼轉(zhuǎn)換成 Vue3 的代碼。

上面提到的兩條 Vue2 到 Vue3 的差異對比中，右側(cè) Vue3 的代碼就是通過這個工具根據(jù)左側(cè) Vue2 代碼原片直出的，效果還不錯吧 ^_^，我們來一起試一下！

嘗試一下

全局安裝 gogocode-cli
npm install gogocode-cli -g
在終端（terminal）中跳轉(zhuǎn)到需要升級的 Vue 項目路徑。如果需要升級 src 路徑
下的 Vue 代碼，執(zhí)行如下命令
gogocode -s ./src -t gogocode-plugin-vue -o ./src-out
轉(zhuǎn)換操作執(zhí)行完畢后新的 Vue3 代碼會被寫入到 src-out 目錄中

我們拿 Vue2 的官方示例項目 vue-hackernews-2.0 試了一下，發(fā)現(xiàn)在轉(zhuǎn)換的基礎(chǔ)上只要稍作改動再改一下構(gòu)建流程就能跑起來了，一些轉(zhuǎn)換的 Diff 如下：


這里只是簡單地介紹，完整的方案請參考：文檔

實現(xiàn)比預(yù)想的要簡單很多

為了達成轉(zhuǎn)換目的，GoGoCode 新增支持了對 .vue 文件的解析，我們可以輕松地獲取到解析好的 template 和 scirpt AST 節(jié)點，并利用 GoGoCode 方便的 API 進行處理。

一些簡單的規(guī)則，比如前面介紹的異步組件轉(zhuǎn)換直接進行類似字符串的替換即可，由于是基于 AST 的，所以無需關(guān)心代碼格式，工作量是很小的：
script  .replace('() => import($_$)', 'Vue.defineAsyncComponent(() => import($_$))')  .replace(    `      () => ({        component: import($_$1),        $$$      })`,    `    Vue.defineAsyncComponent({      loader: () => import($_$1),      $$$    })      `  );

這次項目也檢驗了 GoGoCode 對復(fù)雜情況的處理，就像前面提到的自定義指令生命周期的變化，也很輕松地做到！

開源了，希望能得到大家的反饋

吃水不忘挖井人，希望這些工作能為 Vue 開源社區(qū)做些貢獻，讓社區(qū)盡快享受到 Vue3 帶來的技術(shù)紅利，也讓 Vue 團隊的成員能夠拜托 Vue2 的歷史包袱，更加聚焦于 Vue3 新特性的研發(fā)！項目伊始，存在的不足之處希望得到大家的反饋和幫助：

Github：https://github.com/thx/gogocode（本項目在 packages/gogocode-plugin-vue/ 目錄下）

官網(wǎng)：gogocode.io

最后，關(guān)注公眾號互聯(lián)網(wǎng)架構(gòu)師，在后臺回復(fù)：2T，可以獲取我整理和創(chuàng)作的 Java 系列教程非常齊全。

 推薦閱讀 

1、2019 年 9 月全國程序員工資統(tǒng)計，你是什么水平？

2、如何才能成為優(yōu)秀的架構(gòu)師？

3、從零開始搭建創(chuàng)業(yè)公司后臺技術(shù)棧

4、程序員一般可以從什么平臺接私活？

5、37歲程序員被裁，120天沒找到工作，無奈去小公司，結(jié)果懵了...

6、滴滴業(yè)務(wù)中臺構(gòu)建實踐，首次曝光

7、不認(rèn)命，從10年流水線工人，到谷歌上班的程序媛，一位湖南妹子的勵志故事

8、15張圖看懂瞎忙和高效的區(qū)別！