阿里發(fā)布新工具，直接幫你改代碼！網(wǎng)友：工作量又減輕了～
[導(dǎo)讀]來自：掘金，作者：阿里媽媽前端快爆鏈接：https://juejin.cn/post/6977259197566517284Vue3已經(jīng)出來有一段時間了，很多朋友早已熟讀了文檔，寫了好幾個Demo，饞CompositionAPI等新特性已久了。無奈，在實際工作中，大部分朋友還是不...
來自：掘金，作者：阿里媽媽前端快爆鏈接：https://juejin.cn/post/6977259197566517284Vue3 已經(jīng)出來有一段時間了，很多朋友早已熟讀了文檔，寫了好幾個 Demo，饞 Composition API 等新特性已久了。無奈，在實際工作中，大部分朋友還是不得不守著成千上萬行的 Vue2 老項目過日子，做一次框架升級就像給老房子裝修——念頭總是充沛，決心總是匱乏。其實 Vue 團隊已經(jīng)盡可能地減少了破壞性更新，還提供了一份細致的遷移指南[1]，條數(shù)不少，但定睛一看，大部分都是體力活，有些很簡單，比如異步組件要多包上一層：
還有一些就改起來有點麻煩，比如自定義指令生命周期的更名，和傳入?yún)?shù)的一些細微變化：嘗試一下
全局安裝 gogocode-clinpm?install?gogocode-cli?-g
復(fù)制代碼
在終端（terminal）中跳轉(zhuǎn)到需要升級的 Vue 項目路徑。如果需要升級 src 路徑下的 Vue 代碼，執(zhí)行如下命令gogocode?-s?./src?-t?gogocode-plugin-vue?-o?./src-out
復(fù)制代碼
轉(zhuǎn)換操作執(zhí)行完畢后新的 Vue3 代碼會被寫入到 src-out 目錄中我們拿 Vue2 的官方示例項目?vue-hackernews-2.0[6]?試了一下，發(fā)現(xiàn)在轉(zhuǎn)換的基礎(chǔ)上只要稍作改動再改一下構(gòu)建流程就能跑起來了，一些轉(zhuǎn)換的 Diff 如下：（查看完整 Diff[7]）實現(xiàn)比預(yù)想的要簡單很多
為了達成轉(zhuǎn)換目的，GoGoCode[9]?新增支持了對 .vue 文件的解析，我們可以輕松地獲取到解析好的 template 和 scirpt AST節(jié)點，并利用 GoGoCode 方便的 API 進行處理。一些簡單的規(guī)則，比如前面介紹的異步組件轉(zhuǎn)換直接進行類似字符串的替換即可，由于是基于 AST 的，所以無需關(guān)心代碼格式，工作量是很小的：script
??.replace('()?=>?import($_$)',?'Vue.defineAsyncComponent(()?=>?import($_$))')
??.replace(
????`
??????()?=>?({
????????component:?import($_$1),
????????$$$
??????})`,
????`
????Vue.defineAsyncComponent({
??????loader:?()?=>?import($_$1),
??????$$$
????})
??????`
??);
復(fù)制代碼
這次項目也檢驗了 GoGoCode 對復(fù)雜情況的處理，就像前面提到的自定義指令生命周期的變化，也很輕松地做到！開源了，希望能得到大家的反饋
吃水不忘挖井人，希望這些工作能為 Vue 開源社區(qū)做些貢獻，讓社區(qū)盡快享受到Vue3帶來的技術(shù)紅利，也讓Vue團隊的成員能夠拜托 Vue2 的歷史包袱，更加聚焦于Vue3新特性的研發(fā)！項目伊始，存在的不足之處希望得到大家的反饋和幫助：issues:?github.com/thx/gogocod…[10]釘釘群：34266233最后：求 star 支持！Github：github.com/thx/gogocod…[11]（本項目在 packages/gogocode-plugin-vue/ 目錄下）官網(wǎng)：gogocode.io[12]附錄：當(dāng)前轉(zhuǎn)換規(guī)則覆蓋
| 規(guī)則 | 轉(zhuǎn)換支持 | 文檔 |
|---|---|---|
| v-for 中的 Ref 數(shù)組 | ? | 鏈接[13] |
| 異步組件 | ? | 鏈接[14] |
| attribute 強制行為 | ? | 鏈接[15] |
| $attrs包含class
本站聲明： 本文章由作者或相關(guān)機構(gòu)授權(quán)發(fā)布，目的在于傳遞更多信息，并不代表本站贊同其觀點，本站亦不保證或承諾內(nèi)容真實性等。需要轉(zhuǎn)載請聯(lián)系該專欄作者，如若文章內(nèi)容侵犯您的權(quán)益，請及時聯(lián)系本站刪除。
換一批
延伸閱讀
LED驅(qū)動電源的輸入包括高壓工頻交流(即市電)、低壓直流、高壓直流、低壓高頻交流(如電子變壓器的輸出)等。 關(guān)鍵字： 驅(qū)動電源LED 驅(qū)動電源作為 LED 照明系統(tǒng)的 “心臟”，其穩(wěn)定性直接決定了整個照明設(shè)備的使用壽命。然而，在實際應(yīng)用中，LED 驅(qū)動電源易損壞的問題卻十分常見，不僅增加了維護成本，還影響了用戶體驗。要解決這一問題，需從設(shè)計、生... 關(guān)鍵字： 驅(qū)動電源 照明系統(tǒng) 散熱LED通用照明設(shè)計工程師會遇到許多挑戰(zhàn)，如功率密度、功率因數(shù)校正(PFC)、空間受限和可靠性等。 關(guān)鍵字： LED 驅(qū)動電源 功率因數(shù)校正在LED照明技術(shù)日益普及的今天，LED驅(qū)動電源的電磁干擾(EMI)問題成為了一個不可忽視的挑戰(zhàn)。電磁干擾不僅會影響LED燈具的正常工作，還可能對周圍電子設(shè)備造成不利影響，甚至引發(fā)系統(tǒng)故障。因此，采取有效的硬件措施來解決L... 關(guān)鍵字： LED照明技術(shù) 電磁干擾 驅(qū)動電源開關(guān)電源具有效率高的特性,而且開關(guān)電源的變壓器體積比串聯(lián)穩(wěn)壓型電源的要小得多,電源電路比較整潔,整機重量也有所下降,所以,現(xiàn)在的LED驅(qū)動電源 關(guān)鍵字： LED 驅(qū)動電源 開關(guān)電源
本站介紹 | 申請友情鏈接 | 歡迎投稿 | 隱私聲明 | 廣告業(yè)務(wù) | 網(wǎng)站地圖 | 聯(lián)系我們 | 誠聘英才 ICP許可證號：京ICP證070360號 21ic電子網(wǎng) 2000- 版權(quán)所有 用戶舉報窗口（ 郵箱：macysun@21ic.com ） |
下載文檔
