日本黄色一级经典视频|伊人久久精品视频|亚洲黄色色周成人视频九九九|av免费网址黄色小短片|黄色Av无码亚洲成年人|亚洲1区2区3区无码|真人黄片免费观看|无码一级小说欧美日免费三级|日韩中文字幕91在线看|精品久久久无码中文字幕边打电话

當(dāng)前位置：首頁 > 單片機(jī) > 架構(gòu)師社區(qū)

阿里發(fā)布新工具，直接幫你改代碼！網(wǎng)友：工作量又減輕了～

時(shí)間：2021-09-13 13:59:16
關(guān)鍵字： 代碼   
手機(jī)看文章

掃描二維碼
隨時(shí)隨地手機(jī)看文章

[導(dǎo)讀]來自：掘金，作者：阿里媽媽前端快爆鏈接：https://juejin.cn/post/6977259197566517284Vue3已經(jīng)出來有一段時(shí)間了，很多朋友早已熟讀了文檔，寫了好幾個(gè)Demo，饞CompositionAPI等新特性已久了。無奈，在實(shí)際工作中，大部分朋友還是不...

來自：掘金，作者：阿里媽媽前端快爆

鏈接：https://juejin.cn/post/6977259197566517284

Vue3 已經(jīng)出來有一段時(shí)間了，很多朋友早已熟讀了文檔，寫了好幾個(gè) Demo，饞 Composition API 等新特性已久了。無奈，在實(shí)際工作中，大部分朋友還是不得不守著成千上萬行的 Vue2 老項(xiàng)目過日子，做一次框架升級(jí)就像給老房子裝修——念頭總是充沛，決心總是匱乏。

其實(shí) Vue 團(tuán)隊(duì)已經(jīng)盡可能地減少了破壞性更新，還提供了一份細(xì)致的遷移指南[1]，條數(shù)不少，但定睛一看，大部分都是體力活，有些很簡(jiǎn)單，比如異步組件要多包上一層：

阿里發(fā)布新工具，直接幫你改代碼！網(wǎng)友：工作量又減輕了～還有一些就改起來有點(diǎn)麻煩，比如自定義指令生命周期的更名，和傳入?yún)?shù)的一些細(xì)微變化：

阿里發(fā)布新工具，直接幫你改代碼！網(wǎng)友：工作量又減輕了～
image.png
看到這種變化后，作為厭惡重復(fù)的程序員，已經(jīng)開始盤算著能不能寫個(gè)代碼幫我們把這些規(guī)則批量給改好了，當(dāng)然，寫轉(zhuǎn)換代碼的代碼要比寫網(wǎng)頁難上不少，還好我們之前已經(jīng)有了一個(gè)趁手的工具：GoGoCode[2]。

我們之前的文章《阿里媽媽出的新工具，給批量修改項(xiàng)目代碼減輕了痛苦》[3]介紹過它，作為一個(gè)更簡(jiǎn)單的 AST處理工具，能大大減輕轉(zhuǎn)換邏輯的書寫難度，簡(jiǎn)直就是為了這事兒量身打造的！

于是我們梳理了遷移指南[4]里提到的，附帶上 vue-router \ vuex 升級(jí)的一些 API 變化，配合?GoGoCode[5]?書寫了近 30 條轉(zhuǎn)換邏輯，涵蓋了 Vue2 到 Vue3 代碼 break change 的大部分場(chǎng)景，這個(gè)程序可以幫助你一鍵把 Vue2 的代碼轉(zhuǎn)換成 Vue3 的代碼。

上面提到的兩條 Vue2 到 Vue3 的差異對(duì)比中，右側(cè) Vue3 的代碼就是通過這個(gè)工具根據(jù)左側(cè) Vue2 代碼原片直出的，效果還不錯(cuò)吧 ^_^，我們來一起試一下！

嘗試一下

全局安裝 gogocode-cli

npm?install?gogocode-cli?-g
復(fù)制代碼
在終端（terminal）中跳轉(zhuǎn)到需要升級(jí)的 Vue 項(xiàng)目路徑。如果需要升級(jí) src 路徑下的 Vue 代碼，執(zhí)行如下命令

gogocode?-s?./src?-t?gogocode-plugin-vue?-o?./src-out
復(fù)制代碼
轉(zhuǎn)換操作執(zhí)行完畢后新的 Vue3 代碼會(huì)被寫入到 src-out 目錄中

我們拿 Vue2 的官方示例項(xiàng)目?vue-hackernews-2.0[6]?試了一下，發(fā)現(xiàn)在轉(zhuǎn)換的基礎(chǔ)上只要稍作改動(dòng)再改一下構(gòu)建流程就能跑起來了，一些轉(zhuǎn)換的 Diff 如下：（查看完整 Diff[7]）

阿里發(fā)布新工具，直接幫你改代碼！網(wǎng)友：工作量又減輕了～
image.png
阿里發(fā)布新工具，直接幫你改代碼！網(wǎng)友：工作量又減輕了～
image.png
這里只是簡(jiǎn)單地介紹，完整的方案請(qǐng)參考：文檔[8]

實(shí)現(xiàn)比預(yù)想的要簡(jiǎn)單很多

為了達(dá)成轉(zhuǎn)換目的，GoGoCode[9]?新增支持了對(duì) .vue 文件的解析，我們可以輕松地獲取到解析好的 template 和 scirpt AST節(jié)點(diǎn)，并利用 GoGoCode 方便的 API 進(jìn)行處理。

一些簡(jiǎ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 對(duì)復(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ī)則覆蓋

  • <tfoot id="kqice"></tfoot>
    <abbr id="kqice"></abbr>
      規(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)載請(qǐng)聯(lián)系該專欄作者，如若文章內(nèi)容侵犯您的權(quán)益，請(qǐng)及時(shí)聯(lián)系本站刪除。
      
        		
      
			
		
      

		
      

		
      
        
		    
      
			
      
				
      
					
					換一批
				
      
				
      延伸閱讀
      
			
      
						
      
														
      
						
						
      
							
      LED驅(qū)動(dòng)電源的輸入包括高壓工頻交流(即市電)、低壓直流、高壓直流、低壓高頻交流(如電子變壓器的輸出)等。
      
							關(guān)鍵字：
																驅(qū)動(dòng)電源
															
						
      
					
      
																			
      
						
						
      
							
      在工業(yè)自動(dòng)化蓬勃發(fā)展的當(dāng)下，工業(yè)電機(jī)作為核心動(dòng)力設(shè)備，其驅(qū)動(dòng)電源的性能直接關(guān)系到整個(gè)系統(tǒng)的穩(wěn)定性和可靠性。其中，反電動(dòng)勢(shì)抑制與過流保護(hù)是驅(qū)動(dòng)電源設(shè)計(jì)中至關(guān)重要的兩個(gè)環(huán)節(jié)，集成化方案的設(shè)計(jì)成為提升電機(jī)驅(qū)動(dòng)性能的關(guān)鍵。
      
							關(guān)鍵字：
																工業(yè)電機(jī)
																驅(qū)動(dòng)電源
															
						
      
					
      
																			
      
						
						
      
							
      LED 驅(qū)動(dòng)電源作為 LED 照明系統(tǒng)的 “心臟”，其穩(wěn)定性直接決定了整個(gè)照明設(shè)備的使用壽命。然而，在實(shí)際應(yīng)用中，LED 驅(qū)動(dòng)電源易損壞的問題卻十分常見，不僅增加了維護(hù)成本，還影響了用戶體驗(yàn)。要解決這一問題，需從設(shè)計(jì)、生...
      
							關(guān)鍵字：
																驅(qū)動(dòng)電源
																照明系統(tǒng)
																散熱
															
						
      
					
      
																			
      
						
						
      
							
      根據(jù)LED驅(qū)動(dòng)電源的公式，電感內(nèi)電流波動(dòng)大小和電感值成反比，輸出紋波和輸出電容值成反比。所以加大電感值和輸出電容值可以減小紋波。
      
							關(guān)鍵字：
																LED
																設(shè)計(jì)
																驅(qū)動(dòng)電源
															
						
      
					
      
																			
      
						
						
      
							
      電動(dòng)汽車(EV)作為新能源汽車的重要代表，正逐漸成為全球汽車產(chǎn)業(yè)的重要發(fā)展方向。電動(dòng)汽車的核心技術(shù)之一是電機(jī)驅(qū)動(dòng)控制系統(tǒng)，而絕緣柵雙極型晶體管(IGBT)作為電機(jī)驅(qū)動(dòng)系統(tǒng)中的關(guān)鍵元件，其性能直接影響到電動(dòng)汽車的動(dòng)力性能和...
      
							關(guān)鍵字：
																電動(dòng)汽車
																新能源
																驅(qū)動(dòng)電源
															
						
      
					
      
																			
      
						
						
      
							
      在現(xiàn)代城市建設(shè)中，街道及停車場(chǎng)照明作為基礎(chǔ)設(shè)施的重要組成部分，其質(zhì)量和效率直接關(guān)系到城市的公共安全、居民生活質(zhì)量和能源利用效率。隨著科技的進(jìn)步，高亮度白光發(fā)光二極管(LED)因其獨(dú)特的優(yōu)勢(shì)逐漸取代傳統(tǒng)光源，成為大功率區(qū)域...
      
							關(guān)鍵字：
																發(fā)光二極管
																驅(qū)動(dòng)電源
																LED
															
						
      
					
      
																			
      
						
						
      
							
      LED通用照明設(shè)計(jì)工程師會(huì)遇到許多挑戰(zhàn)，如功率密度、功率因數(shù)校正(PFC)、空間受限和可靠性等。
      
							關(guān)鍵字：
																LED
																驅(qū)動(dòng)電源
																功率因數(shù)校正
															
						
      
					
      
																			
      
						
						
      
							
      在LED照明技術(shù)日益普及的今天，LED驅(qū)動(dòng)電源的電磁干擾(EMI)問題成為了一個(gè)不可忽視的挑戰(zhàn)。電磁干擾不僅會(huì)影響LED燈具的正常工作，還可能對(duì)周圍電子設(shè)備造成不利影響，甚至引發(fā)系統(tǒng)故障。因此，采取有效的硬件措施來解決L...
      
							關(guān)鍵字：
																LED照明技術(shù)
																電磁干擾
																驅(qū)動(dòng)電源
															
						
      
					
      
																			
      
						
						
      
							
      開關(guān)電源具有效率高的特性,而且開關(guān)電源的變壓器體積比串聯(lián)穩(wěn)壓型電源的要小得多,電源電路比較整潔,整機(jī)重量也有所下降,所以,現(xiàn)在的LED驅(qū)動(dòng)電源
      
							關(guān)鍵字：
																LED
																驅(qū)動(dòng)電源
																開關(guān)電源
															
						
      
					
      
																			
      
						
						
      
							
      LED驅(qū)動(dòng)電源是把電源供應(yīng)轉(zhuǎn)換為特定的電壓電流以驅(qū)動(dòng)LED發(fā)光的電壓轉(zhuǎn)換器，通常情況下：LED驅(qū)動(dòng)電源的輸入包括高壓工頻交流(即市電)、低壓直流、高壓直流、低壓高頻交流(如電子變壓器的輸出)等。
      
							關(guān)鍵字：
																LED
																隧道燈
																驅(qū)動(dòng)電源
															
						
      
					
      
												
      

			
            
            

		
      
            

	



    






	
	

	





    
    
      
        關(guān)閉
        
    
      
    
    

	
      
	  	
		
		
	   

	  
	
      
	
	






      •