阿里發(fā)布新工具，直接幫你改代碼！網(wǎng)友：工作量又減輕了～
[導(dǎo)讀]來自：掘金，作者：阿里媽媽前端快爆鏈接：https://juejin.cn/post/6977259197566517284Vue3已經(jīng)出來有一段時(shí)間了，很多朋友早已熟讀了文檔，寫了好幾個(gè)Demo，饞CompositionAPI等新特性已久了。無奈，在實(shí)際工作中，大部分朋友還是不...
來自：掘金，作者：阿里媽媽前端快爆鏈接：https://juejin.cn/post/6977259197566517284Vue3 已經(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ì)微變化：嘗試一下
全局安裝 gogocode-clinpm?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]）實(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
本站聲明： 本文章由作者或相關(guān)機(jī)構(gòu)授權(quán)發(fā)布，目的在于傳遞更多信息，并不代表本站贊同其觀點(diǎn)，本站亦不保證或承諾內(nèi)容真實(shí)性等。需要轉(zhuǎn)載請聯(lián)系該專欄作者，如若文章內(nèi)容侵犯您的權(quán)益，請及時(shí)聯(lián)系本站刪除。
換一批
延伸閱讀
要點(diǎn)： 有效應(yīng)對環(huán)境變化，經(jīng)營業(yè)績穩(wěn)中有升 落實(shí)提質(zhì)增效舉措，毛利潤率延續(xù)升勢 戰(zhàn)略布局成效顯著，戰(zhàn)新業(yè)務(wù)引領(lǐng)增長 以科技創(chuàng)新為引領(lǐng)，提升企業(yè)核心競爭力 堅(jiān)持高質(zhì)量發(fā)展策略，塑強(qiáng)核心競爭優(yōu)勢... 關(guān)鍵字： 通信 BSP 電信運(yùn)營商 數(shù)字經(jīng)濟(jì)
本站介紹 | 申請友情鏈接 | 歡迎投稿 | 隱私聲明 | 廣告業(yè)務(wù) | 網(wǎng)站地圖 | 聯(lián)系我們 | 誠聘英才 ICP許可證號：京ICP證070360號 21IC電子網(wǎng) 2000- 版權(quán)所有 用戶舉報(bào)窗口（ 郵箱：macysun@21ic.com 電話：010-82165003 ） |
下載文檔
