阿里發(fā)布新工具，直接幫你改代碼！網(wǎng)友：工作量又減輕了～
作者：阿里媽媽前端快爆
來(lái)源：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ì)致的遷移指南[1]，條數(shù)不少，但定睛一看，大部分都是體力活，有些很簡(jiǎn)單，比如異步組件要多包上一層：
還有一些就改起來(lái)有點(diǎn)麻煩，比如自定義指令生命周期的更名，和傳入?yún)?shù)的一些細(xì)微變化：
image.png 看到這種變化后，作為厭惡重復(fù)的程序員，已經(jīng)開(kāi)始盤(pán)算著能不能寫(xiě)個(gè)代碼幫我們把這些規(guī)則批量給改好了，當(dāng)然，寫(xiě)轉(zhuǎn)換代碼的代碼要比寫(xiě)網(wǎng)頁(yè)難上不少，還好我們之前已經(jīng)有了一個(gè)趁手的工具：GoGoCode[2]。 我們之前的文章《阿里媽媽出的新工具，給批量修改項(xiàng)目代碼減輕了痛苦》[3]介紹過(guò)它，作為一個(gè)更簡(jiǎn)單的 AST處理工具，能大大減輕轉(zhuǎn)換邏輯的書(shū)寫(xiě)難度，簡(jiǎn)直就是為了這事兒量身打造的！ 于是我們梳理了遷移指南[4]里提到的，附帶上 vue-router \ vuex 升級(jí)的一些 API 變化，配合?GoGoCode[5]?書(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)一起試一下！
嘗試一下
全局安裝 gogocode-cli npm?install?gogocode-cli?-g
復(fù)制代碼在終端（terminal）中跳轉(zhuǎn)到需要升級(jí)的 Vue 項(xiàng)目路徑。如果需要升級(jí) src 路徑下的 Vue 代碼，執(zhí)行如下命令 gogocode?-s?./src?-t?gogocode-plugin-vue?-o?./src-out
復(fù)制代碼轉(zhuǎn)換操作執(zhí)行完畢后新的 Vue3 代碼會(huì)被寫(xiě)入到 src-out 目錄中 我們拿 Vue2 的官方示例項(xiàng)目?vue-hackernews-2.0[6]?試了一下，發(fā)現(xiàn)在轉(zhuǎn)換的基礎(chǔ)上只要稍作改動(dòng)再改一下構(gòu)建流程就能跑起來(lái)了，一些轉(zhuǎn)換的 Diff 如下：（查看完整 Diff[7]）
image.png
image.png 這里只是簡(jiǎn)單地介紹，完整的方案請(qǐng)參考：文檔[8] 實(shí)現(xiàn)比預(yù)想的要簡(jiǎn)單很多
為了達(dá)成轉(zhuǎn)換目的，GoGoCode[9]?新增支持了對(duì) .vue 文件的解析，我們可以輕松地獲取到解析好的 template 和 scirpt AST節(jié)點(diǎn)，并利用 GoGoCode 方便的 API 進(jìn)行處理。 另外搜索公眾號(hào)互聯(lián)網(wǎng)架構(gòu)師回復(fù)“2T”，送你一份驚喜禮包。 一些簡(jiǎn)單的規(guī)則，比如前面介紹的異步組件轉(zhuǎn)換直接進(jìn)行類似字符串的替換即可，由于是基于 AST 的，所以無(wú)需關(guān)心代碼格式，工作量是很小的： script
??.replace('()?=>?import($_$)',?'Vue.defineAsyncComponent(()?=>?import($_$))')
??.replace(
????`
??????()?=>?({
????????component:?import($_$1),
????????$$$
??????})`,
????`
????Vue.defineAsyncComponent({
??????loader:?()?=>?import($_$1),
??????$$$
????})
??????`
??);
復(fù)制代碼這次項(xiàng)目也檢驗(yàn)了 GoGoCode 對(duì)復(fù)雜情況的處理，就像前面提到的自定義指令生命周期的變化，也很輕松地做到！
開(kāi)源了，希望能得到大家的反饋
吃水不忘挖井人，希望這些工作能為 Vue 開(kāi)源社區(qū)做些貢獻(xiàn)，讓社區(qū)盡快享受到Vue3帶來(lái)的技術(shù)紅利，也讓Vue團(tuán)隊(duì)的成員能夠拜托 Vue2 的歷史包袱，更加聚焦于Vue3新特性的研發(fā)！項(xiàng)目伊始，存在的不足之處希望得到大家的反饋和幫助：
issues:?github.com/thx/gogocod…[10]
Github：github.com/thx/gogocod…[11]（本項(xiàng)目在 packages/gogocode-plugin-vue/ 目錄下）
官網(wǎng)：gogocode.io[12]
附錄：當(dāng)前轉(zhuǎn)換規(guī)則覆蓋
規(guī)則 轉(zhuǎn)換支持 文檔 v-for 中的 Ref 數(shù)組 ? 鏈接[13] 異步組件 ? 鏈接[14] attribute 強(qiáng)制行為 ? 鏈接[15] $attrs包含class&style ? 鏈接[16] $children ?? 鏈接[17] 自定義指令 ? 鏈接[18] 自定義元素交互 無(wú)需轉(zhuǎn)換 鏈接[19] Data 選項(xiàng) ? 鏈接[20] emits選項(xiàng) ? 鏈接[21] 事件 API ? 鏈接[22] 過(guò)濾器 ? 鏈接[23] 片段 ? 鏈接[24] 函數(shù)式組件 ? 鏈接[25] 全局 API ? 鏈接[26] 全局 API Treeshaking ? 鏈接[27] 內(nèi)聯(lián)模板 Attribute ?? 鏈接[28] keyattribute ? 鏈接[29] 按鍵修飾符 ? 鏈接[30] 移除 $listeners ? 鏈接[31] 掛載API變化 ? 鏈接[32] propsData 開(kāi)發(fā)中 鏈接[33] 在 prop 的默認(rèn)函數(shù)中訪問(wèn)this 無(wú)需轉(zhuǎn)換 鏈接[34] 渲染函數(shù) API ? 鏈接[35] 插槽統(tǒng)一 ? 鏈接[36] Suspense 無(wú)需轉(zhuǎn)換 鏈接[37] 過(guò)渡的 class 名更改 ? 鏈接[38] Transition 作為 Root 開(kāi)發(fā)中 鏈接[39] Transition Group 根元素 ? 鏈接[40] 移除v-on.native修飾符 ? 鏈接[41] v-model ? 鏈接[42] v-if 與 v-for 的優(yōu)先級(jí)對(duì)比 ? 鏈接[43] v-bind 合并行為 ? 鏈接[44] VNode 生命周期事件 開(kāi)發(fā)中 鏈接[45] Watch on Arrays ? 鏈接[46] vuex ? 鏈接[47] vue-router ? 鏈接[48] 參考資料
[1] 遷移指南:https://v3.cn.vuejs.org/guide/migration/array-refs.html
[2]GoGoCode:https://github.com/thx/gogocode
[3]《阿里媽媽出的新工具，給批量修改項(xiàng)目代碼減輕了痛苦》:?https://juejin.cn/post/6938601548192677918
[4]遷移指南:https://v3.cn.vuejs.org/guide/migration/array-refs.html
[5]GoGoCode:?https://github.com/thx/gogocode
[6]vue-hackernews-2.0:?https://github.com/vuejs/vue-hackernews-2.0
[7]查看完整 Diff:?https://github.com/thx/gogocode/commit/6506a0e693aff1896da6c8863fa7e7c72d89610f?branch=6506a0e693aff1896da6c8863fa7e7c72d89610f&diff=split
[8]文檔:?https://gogocode.io/zh/docs/specification/vue2-to-vue3
[9]GoGoCode:?https://github.com/thx/gogocode
[10]github.com/thx/gogocod…:?https://github.com/thx/gogocode/issues
[11]github.com/thx/gogocod…:?https://github.com/thx/gogocode
[12]gogocode.io:?https://gogocode.io
相關(guān)閱讀：2T架構(gòu)師學(xué)習(xí)資料干貨分享
全棧架構(gòu)社區(qū)交流群
?「全棧架構(gòu)社區(qū)」建立了讀者架構(gòu)師交流群，大家可以添加小編微信進(jìn)行加群。歡迎有想法、樂(lè)于分享的朋友們一起交流學(xué)習(xí)。
看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多人
往期資源：
2019最新Python視頻：從入門(mén)到Swiper項(xiàng)目實(shí)戰(zhàn)
2019年Android應(yīng)用程序開(kāi)發(fā)
2019重磅高級(jí)資源：Java并發(fā)編程原理和實(shí)戰(zhàn)
最新黑馬大數(shù)據(jù)資源：深入解析docker容器化技術(shù)
最新Java后端實(shí)戰(zhàn)視頻：SSM框架在線商城系統(tǒng)
2019最新黑客技術(shù)之Windows網(wǎng)絡(luò)安全精講