Vue3 已經(jīng)出來(lái)有一段時(shí)間了，很多朋友早已熟讀了文檔,，寫了好幾個(gè) Demo,，饞 Composition API 等新特性已久了。無(wú)奈,，在實(shí)際工作中,，大部分朋友還是不得不守著成千上萬(wàn)行的 Vue2 老項(xiàng)目過日子，做一次框架升級(jí)就像給老房子裝修——念頭總是充沛,，決心總是匱乏,。 其實(shí) Vue 團(tuán)隊(duì)已經(jīng)盡可能地減少了破壞性更新，還提供了一份細(xì)致的遷移指南[1],，條數(shù)不少,，但定睛一看，大部分都是體力活,，有些很簡(jiǎn)單,，比如異步組件要多包上一層：
 看到這種變化后,，作為厭惡重復(fù)的程序員，已經(jīng)開始盤算著能不能寫個(gè)代碼幫我們把這些規(guī)則批量給改好了,，當(dāng)然,，寫轉(zhuǎn)換代碼的代碼要比寫網(wǎng)頁(yè)難上不少，還好我們之前已經(jīng)有了一個(gè)趁手的工具：GoGoCode[2],。 我們之前的文章《阿里媽媽出的新工具,，給批量修改項(xiàng)目代碼減輕了痛苦》[3]介紹過它，作為一個(gè)更簡(jiǎn)單的 AST處理工具,，能大大減輕轉(zhuǎn)換邏輯的書寫難度,，簡(jiǎn)直就是為了這事兒量身打造的！ 于是我們梳理了遷移指南[4]里提到的,，附帶上 vue-router \ vuex 升級(jí)的一些 API 變化,，配合 GoGoCode[5] 書寫了近 30 條轉(zhuǎn)換邏輯，涵蓋了 Vue2 到 Vue3 代碼 break change 的大部分場(chǎng)景,，這個(gè)程序可以幫助你一鍵把 Vue2 的代碼轉(zhuǎn)換成 Vue3 的代碼,。 上面提到的兩條 Vue2 到 Vue3 的差異對(duì)比中，右側(cè) Vue3 的代碼就是通過這個(gè)工具根據(jù)左側(cè) Vue2 代碼原片直出的,，效果還不錯(cuò)吧 ^_^,，我們來(lái)一起試一下,！ 嘗試一下全局安裝 gogocode-cli npm install gogocode-cli -g在終端（terminal）中跳轉(zhuǎn)到需要升級(jí)的 Vue 項(xiàng)目路徑。如果需要升級(jí) src 路徑下的 Vue 代碼,，執(zhí)行如下命令 轉(zhuǎn)換操作執(zhí)行完畢后新的 Vue3 代碼會(huì)被寫入到 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]）   這里只是簡(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)行處理,。 一些簡(jiǎn)單的規(guī)則，比如前面介紹的異步組件轉(zhuǎn)換直接進(jìn)行類似字符串的替換即可,，由于是基于 AST 的,，所以無(wú)需關(guān)心代碼格式，工作量是很小的： script這次項(xiàng)目也檢驗(yàn)了 GoGoCode 對(duì)復(fù)雜情況的處理,，就像前面提到的自定義指令生命周期的變化,，也很輕松地做到！ 開源了,，希望能得到大家的反饋吃水不忘挖井人,，希望這些工作能為 Vue 開源社區(qū)做些貢獻(xiàn)，讓社區(qū)盡快享受到Vue3帶來(lái)的技術(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)：[12] 附錄：當(dāng)前轉(zhuǎn)換規(guī)則覆蓋
參考資料遷移指南:https://v3.cn./guide/migration/array-refs.html [2]GoGoCode:https://github.com/thx/gogocode [3]《阿里媽媽出的新工具，給批量修改項(xiàng)目代碼減輕了痛苦》: https:///post/6938601548192677918 [4]遷移指南:https://v3.cn./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:///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]: https://gogocode.io |
|
|
還有一些就改起來(lái)有點(diǎn)麻煩，比如自定義指令生命周期的更名,，和傳入?yún)?shù)的一些細(xì)微變化：
