阿里發(fā)布新工具，直接幫你改代碼！網(wǎng)友：工作量又減輕了～
點(diǎn)擊上方“碼農(nóng)突圍”，馬上關(guān)注
這里是碼農(nóng)充電第一站，回復(fù)“666”，獲取一份專屬大禮包
真愛，請?jiān)O(shè)置“星標(biāo)”或點(diǎn)個(gè)“在看
來自：掘金，作者：阿里媽媽前端快爆
鏈接：https://juejin.cn/post/6977259197566517284
Vue3 已經(jīng)出來有一段時(shí)間了，很多朋友早已熟讀了文檔，寫了好幾個(gè) Demo，饞 Composition API 等新特性已久了。無奈，在實(shí)際工作中，大部分朋友還是不得不守著成千上萬行的 Vue2 老項(xiàng)目過日子，做一次框架升級就像給老房子裝修——念頭總是充沛，決心總是匱乏。
其實(shí) Vue 團(tuán)隊(duì)已經(jīng)盡可能地減少了破壞性更新，還提供了一份細(xì)致的遷移指南[1]，條數(shù)不少，但定睛一看，大部分都是體力活，有些很簡單，比如異步組件要多包上一層：
還有一些就改起來有點(diǎn)麻煩，比如自定義指令生命周期的更名，和傳入?yún)?shù)的一些細(xì)微變化：
看到這種變化后，作為厭惡重復(fù)的程序員，已經(jīng)開始盤算著能不能寫個(gè)代碼幫我們把這些規(guī)則批量給改好了，當(dāng)然，寫轉(zhuǎn)換代碼的代碼要比寫網(wǎng)頁難上不少，還好我們之前已經(jīng)有了一個(gè)趁手的工具：GoGoCode[2]。
我們之前的文章《阿里媽媽出的新工具，給批量修改項(xiàng)目代碼減輕了痛苦》[3]介紹過它，作為一個(gè)更簡單的 AST處理工具，能大大減輕轉(zhuǎn)換邏輯的書寫難度，簡直就是為了這事兒量身打造的！
于是我們梳理了遷移指南[4]里提到的，附帶上 vue-router \ vuex 升級的一些 API 變化，配合 GoGoCode[5] 書寫了近 30 條轉(zhuǎn)換邏輯，涵蓋了 Vue2 到 Vue3 代碼 break change 的大部分場景，這個(gè)程序可以幫助你一鍵把 Vue2 的代碼轉(zhuǎn)換成 Vue3 的代碼。
上面提到的兩條 Vue2 到 Vue3 的差異對比中，右側(cè) Vue3 的代碼就是通過這個(gè)工具根據(jù)左側(cè) Vue2 代碼原片直出的，效果還不錯(cuò)吧 ^_^，我們來一起試一下！
嘗試一下
全局安裝 gogocode-cli
npm install gogocode-cli -g
復(fù)制代碼
在終端（terminal）中跳轉(zhuǎn)到需要升級的 Vue 項(xiàng)目路徑。如果需要升級 src 路徑下的 Vue 代碼，執(zhí)行如下命令
gogocode -s ./src -t gogocode-plugin-vue -o ./src-out
復(fù)制代碼
轉(zhuǎn)換操作執(zhí)行完畢后新的 Vue3 代碼會被寫入到 src-out 目錄中
我們拿 Vue2 的官方示例項(xiàng)目 vue-hackernews-2.0[6] 試了一下，發(fā)現(xiàn)在轉(zhuǎn)換的基礎(chǔ)上只要稍作改動再改一下構(gòu)建流程就能跑起來了，一些轉(zhuǎn)換的 Diff 如下：（查看完整 Diff[7]）
這里只是簡單地介紹，完整的方案請參考：文檔[8]
實(shí)現(xiàn)比預(yù)想的要簡單很多
為了達(dá)成轉(zhuǎn)換目的，GoGoCode[9] 新增支持了對 .vue 文件的解析，我們可以輕松地獲取到解析好的 template 和 scirpt AST節(jié)點(diǎn)，并利用 GoGoCode 方便的 API 進(jìn)行處理。
一些簡單的規(guī)則，比如前面介紹的異步組件轉(zhuǎn)換直接進(jìn)行類似字符串的替換即可，由于是基于 AST 的，所以無需關(guān)心代碼格式，工作量是很小的：
script
.replace('() => import($_$)', 'Vue.defineAsyncComponent(() => import($_$))')
.replace(
`
() => ({
component: import($_$1),
$$$
})`,
`
Vue.defineAsyncComponent({
loader: () => import($_$1),
$$$
})
`
);
復(fù)制代碼
這次項(xiàng)目也檢驗(yàn)了 GoGoCode 對復(fù)雜情況的處理，就像前面提到的自定義指令生命周期的變化，也很輕松地做到！
開源了，希望能得到大家的反饋
吃水不忘挖井人，希望這些工作能為 Vue 開源社區(qū)做些貢獻(xiàn)，讓社區(qū)盡快享受到Vue3帶來的技術(shù)紅利，也讓Vue團(tuán)隊(duì)的成員能夠拜托 Vue2 的歷史包袱，更加聚焦于Vue3新特性的研發(fā)！項(xiàng)目伊始，存在的不足之處希望得到大家的反饋和幫助：
issues: github.com/thx/gogocod…[10]
釘釘群：34266233
最后：求 star 支持！
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] |
自定義元素交互 | 無需轉(zhuǎn)換 | 鏈接[19] |
Data 選項(xiàng) | ? | 鏈接[20] |
emits選項(xiàng) | ? | 鏈接[21] |
事件 API | ? | 鏈接[22] |
過濾器 | ? | 鏈接[23] |
片段 | ? | 鏈接[24] |
函數(shù)式組件 | ? | 鏈接[25] |
全局 API | ? | 鏈接[26] |
全局 API Treeshaking | ? | 鏈接[27] |
內(nèi)聯(lián)模板 Attribute | ?? | 鏈接[28] |
keyattribute | ? | 鏈接[29] |
按鍵修飾符 | ? | 鏈接[30] |
移除 $listeners | ? | 鏈接[31] |
掛載API變化 | ? | 鏈接[32] |
propsData | 開發(fā)中 | 鏈接[33] |
在 prop 的默認(rèn)函數(shù)中訪問this | 無需轉(zhuǎn)換 | 鏈接[34] |
渲染函數(shù) API | ? | 鏈接[35] |
插槽統(tǒng)一 | ? | 鏈接[36] |
Suspense | 無需轉(zhuǎn)換 | 鏈接[37] |
過渡的 class 名更改 | ? | 鏈接[38] |
Transition 作為 Root | 開發(fā)中 | 鏈接[39] |
Transition Group 根元素 | ? | 鏈接[40] |
移除v-on.native修飾符 | ? | 鏈接[41] |
v-model | ? | 鏈接[42] |
v-if 與 v-for 的優(yōu)先級對比 | ? | 鏈接[43] |
v-bind 合并行為 | ? | 鏈接[44] |
VNode 生命周期事件 | 開發(fā)中 | 鏈接[45] |
Watch on Arrays | ? | 鏈接[46] |
vuex | ? | 鏈接[47] |
vue-router | ? | 鏈接[48] |
參考資料
遷移指南: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
- END - 最近熱文
? 武大94年博士年薪201萬入職華為天才計(jì)劃！學(xué)霸日程表曝光！太牛逼了！ ? 22年前被嘲養(yǎng)豬的北大學(xué)子，如今怎么樣了？ ? 清華計(jì)算機(jī)系上熱搜！近9成優(yōu)秀畢業(yè)生放棄留學(xué)，前50名41人留校深造 ? 華為最美小姐姐被外派墨西哥后... ? 我用一根網(wǎng)線，控制了整棟樓的網(wǎng)絡(luò)