?
來(lái)源：https://juejin.cn/post/6977259197566517284
Vue3 已經(jīng)出來(lái)有一段時(shí)間了，很多朋友早已熟讀了文檔，寫(xiě)了好幾個(gè) Demo，饞 Composition API 等新特性已久了。無(wú)奈，在實(shí)際工作中，大部分朋友還是不得不守著成千上萬(wàn)行的 Vue2 老項(xiàng)目過(guò)日子，做一次框架升級(jí)就像給老房子裝修——念頭總是充沛，決心總是匱乏。其實(shí) Vue 團(tuán)隊(duì)已經(jīng)盡可能地減少了破壞性更新，還提供了一份細(xì)致的遷移指南，條數(shù)不少，但定睛一看，大部分都是體力活，有些很簡(jiǎn)單，比如異步組件要多包上一層：
還有一些就改起來(lái)有點(diǎn)麻煩，比如自定義指令生命周期的更名，和傳入?yún)?shù)的一些細(xì)微變化：
看到這種變化后，作為厭惡重復(fù)的程序員，已經(jīng)開(kāi)始盤(pán)算著能不能寫(xiě)個(gè)代碼幫我們把這些規(guī)則批量給改好了，當(dāng)然，寫(xiě)轉(zhuǎn)換代碼的代碼要比寫(xiě)網(wǎng)頁(yè)難上不少，還好我們之前已經(jīng)有了一個(gè)趁手的工具：GoGoCode。作為一個(gè)更簡(jiǎn)單的 AST 處理工具，能大大減輕轉(zhuǎn)換邏輯的書(shū)寫(xiě)難度，簡(jiǎn)直就是為了這事兒量身打造的！于是我們梳理了遷移指南里提到的，附帶上 vue-router \ vuex 升級(jí)的一些 API 變化，配合 GoGoCode 書(shū)寫(xiě)了近 30 條轉(zhuǎn)換邏輯，涵蓋了 Vue2 到 Vue3 代碼 break change 的大部分場(chǎng)景，這個(gè)程序可以幫助你一鍵把 Vue2 的代碼轉(zhuǎn)換成 Vue3 的代碼。上面提到的兩條 Vue2 到 Vue3 的差異對(duì)比中，右側(cè) Vue3 的代碼就是通過(guò)這個(gè)工具根據(jù)左側(cè) Vue2 代碼原片直出的，效果還不錯(cuò)吧 ^_^，我們來(lái)一起試一下！嘗試一下
npm install gogocode-cli -g
在終端（terminal）中跳轉(zhuǎn)到需要升級(jí)的 Vue 項(xiàng)目路徑。如果需要升級(jí) src 路徑
gogocode -s ./src -t gogocode-plugin-vue -o ./src-out
轉(zhuǎn)換操作執(zhí)行完畢后新的 Vue3 代碼會(huì)被寫(xiě)入到 src-out 目錄中
我們拿 Vue2 的官方示例項(xiàng)目 vue-hackernews-2.0 試了一下，發(fā)現(xiàn)在轉(zhuǎn)換的基礎(chǔ)上只要稍作改動(dòng)再改一下構(gòu)建流程就能跑起來(lái)了，一些轉(zhuǎn)換的 Diff 如下：
這里只是簡(jiǎn)單地介紹，完整的方案請(qǐng)參考：文檔
實(shí)現(xiàn)比預(yù)想的要簡(jiǎn)單很多
一些簡(jiǎn)單的規(guī)則，比如前面介紹的異步組件轉(zhuǎn)換直接進(jìn)行類(lèi)似字符串的替換即可，由于是基于 AST 的，所以無(wú)需關(guān)心代碼格式，工作量是很小的：script .replace('() => import($_$)', 'Vue.defineAsyncComponent(() => import($_$))') .replace( ` () => ({ component: import($_$1), $$$ })`, ` Vue.defineAsyncComponent({ loader: () => import($_$1), $$$ }) ` );
開(kāi)源了，希望能得到大家的反饋
吃水不忘挖井人，希望這些工作能為 Vue 開(kāi)源社區(qū)做些貢獻(xiàn)，讓社區(qū)盡快享受到 Vue3 帶來(lái)的技術(shù)紅利，也讓 Vue 團(tuán)隊(duì)的成員能夠拜托 Vue2 的歷史包袱，更加聚焦于 Vue3 新特性的研發(fā)！項(xiàng)目伊始，存在的不足之處希望得到大家的反饋和幫助：Github：https://github.com/thx/gogocode（本項(xiàng)目在 packages/gogocode-plugin-vue/ 目錄下）
PS：歡迎在留言區(qū)留下你的觀(guān)點(diǎn)，一起討論提高。如果今天的文章讓你有新的啟發(fā)，歡迎轉(zhuǎn)發(fā)分享給更多人。
