重磅：阿里發(fā)布神器工具，直接幫你改代碼，我高潮了！網(wǎng)友：工作量又減輕了！
作者：阿里媽媽前端快爆
鏈接：https://juejin.cn/post/6977259197566517284
Vue3 已經(jīng)出來有一段時間了，很多朋友早已熟讀了文檔，寫了好幾個 Demo，饞 Composition API 等新特性已久了。無奈，在實際工作中，大部分朋友還是不得不守著成千上萬行的 Vue2 老項目過日子，做一次框架升級就像給老房子裝修——念頭總是充沛，決心總是匱乏。
還有一些就改起來有點麻煩，比如自定義指令生命周期的更名，和傳入?yún)?shù)的一些細微變化：
嘗試一下
全局安裝 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[6]?試了一下，發(fā)現(xiàn)在轉(zhuǎn)換的基礎上只要稍作改動再改一下構建流程就能跑起來了，一些轉(zhuǎn)換的 Diff 如下：（查看完整 Diff[7]）
這里只是簡單地介紹，完整的方案請參考：文檔[8]
實現(xiàn)比預想的要簡單很多
為了達成轉(zhuǎn)換目的，GoGoCode[9]?新增支持了對 .vue 文件的解析，我們可以輕松地獲取到解析好的 template 和 scirpt AST節(jié)點，并利用 GoGoCode 方便的 API 進行處理。
一些簡單的規(guī)則，比如前面介紹的異步組件轉(zhuǎn)換直接進行類似字符串的替換即可，由于是基于 AST 的，所以無需關心代碼格式，工作量是很小的：
script
??.replace('()?=>?import($_$)',?'Vue.defineAsyncComponent(()?=>?import($_$))')
??.replace(
????`
??????()?=>?({
????????component:?import($_$1),
????????$$$
??????})`,
????`
????Vue.defineAsyncComponent({
??????loader:?()?=>?import($_$1),
??????$$$
????})
??????`
??);
這次項目也檢驗了 GoGoCode 對復雜情況的處理，就像前面提到的自定義指令生命周期的變化，也很輕松地做到！
開源了，希望能得到大家的反饋
issues:?github.com/thx/gogocod…[10]
釘釘群：34266233
最后：求 star 支持！
Github：github.com/thx/gogocod…[11]（本項目在 packages/gogocode-plugin-vue/ 目錄下）
官網(wǎng)：gogocode.io[12]
附錄：當前轉(zhuǎn)換規(guī)則覆蓋
| 規(guī)則 | 轉(zhuǎn)換支持 | 文檔 |
|---|---|---|
| v-for 中的 Ref 數(shù)組 | ? | 鏈接[13] |
| 異步組件 | ? | 鏈接[14] |
| attribute 強制行為 | ? | 鏈接[15] |
| $attrs包含class&style | ? | 鏈接[16] |
| $children | ?? | 鏈接[17] |
| 自定義指令 | ? | 鏈接[18] |
| 自定義元素交互 | 無需轉(zhuǎn)換 | 鏈接[19] |
| Data 選項 | ? | 鏈接[20] |
| emits選項 | ? | 鏈接[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 的默認函數(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]《阿里媽媽出的新工具，給批量修改項目代碼減輕了痛苦》:?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
PS：如果覺得我的分享不錯，歡迎大家隨手點贊、轉(zhuǎn)發(fā)、在看。
PS：如果覺得我的分享不錯，歡迎大家隨手點贊、轉(zhuǎn)發(fā)、在看。
PS：如果覺得我的分享不錯，歡迎大家隨手點贊、轉(zhuǎn)發(fā)、在看。