這個工具竟然能自動升級 Element 老項目

升級 Vue3 的最后一塊拼圖

這里是阿里媽媽前端技術(shù)部，之前我們發(fā)布了基于代碼轉(zhuǎn)換工具 GoGoCode 的 Vue 轉(zhuǎn)換插件（阿里媽媽又做了新工具，幫你把 Vue2 代碼改成 Vue3 的），它能夠幫你把項目里的 Vue2 的代碼升級成 Vue3 的，但我們也收到很多朋友的反饋：我用了基于 Vue2 的 ElementUI，它還沒有支持 Vue3，我把我的業(yè)務(wù)代碼升級上去也沒法跑起來。

如今 ElementUI 的 Vue3 版本 Element Plus 已經(jīng)正式發(fā)布了，它大部分兼容了 ElementUI 的 API，但也存在著一些 breaking change，在兩個團隊的合作下，我們給大家?guī)?gogocode-element-plugin，它可以自動化地修改你的項目代碼來適應(yīng)所有的 breaking change，大大減少你的升級工作量。

最后一塊拼圖已經(jīng)拼上！

一個大項目的升級實戰(zhàn)

為了保證我們的轉(zhuǎn)換規(guī)則能適配復雜場景，我們挑選了社區(qū)上火熱的 Vue2 + ElementUI 項目 vue-element-admin，它覆蓋了大多數(shù) Vue2 和 Element 的用法，我們來試試通過轉(zhuǎn)換插件把它轉(zhuǎn)換成 Vue3 + Element Plus 的！

做好版本控制，使用一個新的分支

為了方便對比，我們接下來的命令會讓轉(zhuǎn)換工具覆寫你原來的代碼，建議你切換到一個新的分支操作，如果你的代碼沒有被 git 托管，請不要輸出在同一目錄。

git?checkout?-b?to-vue3

安裝 gogocode-cli

npm?install?gogocode-cli?-g

格式化源代碼，方便對比代碼更改

因為代碼經(jīng)過工具的 AST 修改后可能會發(fā)生格式的變化，所以建議預先把所有的源碼用 prettier 格式化一遍，再和轉(zhuǎn)換后的作對比就一目了然了。

gogocode?-s?./src?-t?gogocode-plugin-prettier??-o?./src

在提示是否覆蓋源代碼的時輸入 y 回車即可

經(jīng)過了 prettier 后，代碼都被統(tǒng)一成了一樣的格式：

把這個修改提交到 git 上

使用工具把代碼從 Vue2 轉(zhuǎn)換成 Vue3

這次我們使用 gogocode-plugin-vue 插件把項目代碼從 Vue2 升級到 Vue3：

gogocode?-s?./src?-t?gogocode-plugin-vue??-o?./src

這個項目有 258 個文件，轉(zhuǎn)換程序賣力工作中：

轉(zhuǎn)換完成！有 151 個文件發(fā)生了改動，這要是用手改頭發(fā)可能就保不住了。

可以發(fā)現(xiàn)一些生命周期已經(jīng)被轉(zhuǎn)換了：

slot 和 filter 語法也不在話下：

函數(shù)式組件已經(jīng)被改得面目全非了：

挨個文件看一遍，如果沒什么大問題就 commit 并進入下一步！

一些可能需要手動修改的地方可以參考這個：需要關(guān)注的地方，不過建議你在最后能跑起來的時候再關(guān)心這些細節(jié)。

使用工具把代碼從 ElementUI 轉(zhuǎn)換成 Element Plus

我們使用 gogocode-element-plugin 插件把項目代碼從 ElementUI 升級到 Element Plus：

gogocode?-s?./src?-t?gogocode-plugin-element??-o?./src

這里是官方總結(jié)的：Element Plus 不兼容變化，gogocode-element-plugin 插件覆蓋了幾乎所有的規(guī)則。

插件自動幫你搞定的轉(zhuǎn)換

• icon 從 class 模式轉(zhuǎn)換成了組件模式，組件也被自動的導入

• 組件自動更名

• 參數(shù)自動更名

• 屬性自動更名

• 導入自動從 element-ui 變更到 element-plus

手動修改部分

這些只需要一次性、單文件的改動手動去做即可~

package.json

element-ui 換成 element-plus如果使用了圖標，別忘記 ``@element-plus/icons` 也裝上

css 引入

import?'element-plus/theme-chalk/index.css'

升級依賴和構(gòu)建

每個人的構(gòu)建環(huán)境不同，你可以通過下面的命令幫你更新 package.json 里面的 vue 和 vue-cli 的版本號：

gogocode?-s?./package.json?-t?gogocode-plugin-vue??-o?./package.json

我這里遇到了 Webpack4 升級到 Webpack5 的一些問題，具體參考了 vue-cli 升級文檔 也都一一解決了。

跑起來試試，根據(jù)報錯進一步修改

運行項目，看看有哪些報錯一一修復之，一些是第三方組件帶來的，一些是構(gòu)建帶來的，對于這樣體量的項目我大概修改了 100 多行的樣子：commit

然后就見到了我期待的畫面：

希望能得到大家的反饋

希望 GoGoCode 和配套的代碼轉(zhuǎn)換工具能幫助大家少做一些千篇一律的工作，早點下班回家

官網(wǎng)：gogocode.io