框架升級(jí)背景

公司目前業(yè)務(wù)迭代很快，且大部分的流量都在公眾號(hào)上。然而我們公眾號(hào)所使用的框架卻是3年前的Vue 1.0.16。面對(duì)Vue這3年來帶來的無數(shù)新特性，我們只能望洋興嘆：看得見，摸不著，因?yàn)樯?jí)這事看起來太難了。

經(jīng)常可以聽到老同事、新同事對(duì)老框架頻頻吐槽，也聽到很多同學(xué)說升級(jí)太難了，完全不可能。

于是，我就尋思著整點(diǎn)事。

升級(jí)概況

我們的公眾號(hào)承載的是一個(gè)電商購物平臺(tái)，歷經(jīng)3年多的版本迭代，積攢了無數(shù)的業(yè)務(wù)代碼，既臃腫又龐大，可謂是一個(gè)大型的應(yīng)用程序了。這也是其他同學(xué)提到升級(jí)不可能的主要原因。

當(dāng)前的Vue版本: v1.0.16, Vue—Router版本: v0.7.13.
升級(jí)后的目標(biāo)版本:Vue: v2.6.10, Vue—Router: v3.1.3.

升級(jí)思路

因?yàn)閂ue官方有對(duì)Vue 1.x遷移到更高版本的說明, 并且還提供了升級(jí)助手，那升級(jí)的事情完全依賴升級(jí)助手便可完成。不過事實(shí)是這樣嗎？

開始動(dòng)手

下載好官方提供的”遷移工具“，然后在項(xiàng)目的master分支上檢出一個(gè)新的專門用來做升級(jí)的分支，我是這么命名的：update/vue2vue2.x。

好了，準(zhǔn)備工作就緒，只需要執(zhí)行”遷移工具“就可以。Let’s do it!

Holy Shit! 建議改進(jìn)多達(dá)近900個(gè)！這工具居然只有提示沒有自動(dòng)修復(fù)？這太出乎我的意外了！
這難辦了，問題太多了，難道要我一個(gè)個(gè)手動(dòng)修復(fù)？不過我馬上發(fā)現(xiàn)，有不少Replace之類的提示，這家伙完全可以自己完成啊，不過這工具的作者比較懶，沒寫。那我就用這個(gè)工具幫我來完成大部分的工作吧。

修改遷移工具

遷移工具在Github上可以直接找到，然后打開源碼，閱讀，找到它的處理方式，然后修改其中實(shí)現(xiàn)，這個(gè)過程就不多說了，無非是找到匹配規(guī)則，然后讀文件，按照規(guī)則替換，再寫文件。我對(duì)一些明顯能夠自動(dòng)替換的能力做了處理，比如上圖中的898號(hào)問題，那這個(gè)工具可以幫我自動(dòng)完成這個(gè)能力的。

我的這個(gè)工具可能會(huì)幫到其它朋友，這里來列一下修改之后提供的能力：

- router.go更換為router.push - ready生命周期回調(diào)更改為mounted（這個(gè)使用要謹(jǐn)慎） - 更改v-for循環(huán)的解構(gòu)順序，例如：v-for="(key, item) in provinceList" 可以自動(dòng)替換為：v-for="(item, key) in provinceList" - 更改回調(diào)函數(shù)的調(diào)用方式，例如：Replace cutword 10 with cutword(10) - 更改三括號(hào)運(yùn)算符為v-html，例如：Replace {{{content}}} with v-html="content" on a containing element - 等等等

大概修改了這么些文件：

我已將修改后的項(xiàng)目開源，需要使用的同學(xué)請(qǐng)自取，使用前請(qǐng)慎重。 > https://github.com/sahadev/vue-migration-helper

如果使用上有問題也可聯(lián)系我。需要使用調(diào)試的方式使用，正常方式目前有問題。

node index.js 項(xiàng)目地址

通過工具的自動(dòng)調(diào)整，最終運(yùn)行后的結(jié)果如下：

已從899個(gè)提示減少到243，解決了656個(gè)問題，解決占比73%，一共調(diào)整149個(gè)文件。已經(jīng)縮短了大量的工作，接下里的問題就需要進(jìn)行更精細(xì)化的調(diào)整或者手工操作了。而我接下來選擇的是手動(dòng)修改。先讓自動(dòng)修改的代碼跑起來。

運(yùn)行自動(dòng)修改后的代碼

首要做的應(yīng)該是調(diào)整Vue的框架版本，那么我從官網(wǎng)上拿到了最新的Vue: v2.6.10與Vue-Router: v3.1.3進(jìn)行替換，并開始運(yùn)行。

果不其然，遇到了編譯問題：

如果使用我工具的朋友會(huì)遇到這個(gè)問題，這個(gè)地方為了不影響代碼的執(zhí)行過程，讓使用者自行調(diào)整生命周期，追加了這個(gè)提示，我這里需要手動(dòng)修改為mounted。

修改完成后，編譯成功：

但運(yùn)行情況怎么樣呢？
Vue-tools已經(jīng)偵測到了Vue的版本，但是界面上一片空白，這是什么情況？這種情況下，最好的辦法就是一步步替換，我找到了最新Vue的使用方式，并嘗試運(yùn)行了一個(gè)Demo，然后看最小單位如何執(zhí)行，可行的話，再進(jìn)行移植。

逐步替換

因?yàn)轫?xiàng)目太大又很老，這個(gè)排查的過程花費(fèi)了很多的時(shí)間與精力。這是一個(gè)耐心細(xì)致的過程，在這個(gè)過程中幾次想放棄，但最后從結(jié)果來看是堅(jiān)持下來了。這個(gè)每個(gè)人可能遇到的情況不一樣，就不專門提及這些瑣碎的事情了。

趟過了很多坑之后，主要的幾個(gè)頁面都跑起來了，展示正常，點(diǎn)擊事件正常，主交易流程可以跑通。到這里只是說主框架的坑趟完了，剩下的事情就是集結(jié)其他小伙伴分模塊實(shí)施，然后協(xié)調(diào)資源做最終回歸測試的過程了。

更新之前：

更新之后：

后話

協(xié)調(diào)資源做完回歸測試，還需要灰度發(fā)布到線上監(jiān)控運(yùn)行情況趨于穩(wěn)定后才能在這個(gè)新的框架上繼續(xù)做業(yè)務(wù)開發(fā)，這更是一個(gè)漫長的過程，不過希望的曙光已經(jīng)可以看見。

總結(jié)

以上是生活随笔為你收集整理的记一次Vue框架升级的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。