[發(fā)明專(zhuān)利]前端項(xiàng)目調(diào)試方法及系統(tǒng)

在審

• 申請(qǐng)?zhí)枺?/td>: 202210092753.4
• 申請(qǐng)日: 2022-01-26
• 公開(kāi)（公告）號(hào): CN114416101A
• 公開(kāi)（公告）日: 2022-04-29
• 發(fā)明（設(shè)計(jì)）人: 尤海洋
• 申請(qǐng)（專(zhuān)利權(quán)）人: 工銀科技有限公司;中國(guó)工商銀行股份有限公司
• 主分類(lèi)號(hào): G06F8/41
• 分類(lèi)號(hào): G06F8/41;G06F8/71
• 代理公司: 北京三友知識(shí)產(chǎn)權(quán)代理有限公司 11127
• 代理人: 周永君;董驍毅

一種前端項(xiàng)目調(diào)試方法及系統(tǒng)，涉及前端開(kāi)發(fā)領(lǐng)域，可應(yīng)用于金融領(lǐng)域和其他領(lǐng)域，所述方法包含：監(jiān)聽(tīng)瀏覽器的服務(wù)端口獲取用戶(hù)輸入的網(wǎng)站中待調(diào)試頁(yè)面的頁(yè)面信息；根據(jù)所述頁(yè)面信息于預(yù)設(shè)配置文件中獲得所述頁(yè)面信息對(duì)應(yīng)的入口文件，根據(jù)所述入口文件提取待調(diào)試頁(yè)面的網(wǎng)頁(yè)代碼；根據(jù)所述瀏覽器屬性將所述網(wǎng)頁(yè)代碼編譯打包為對(duì)應(yīng)屬性的顯示代碼，將所述顯示代碼提供至瀏覽器顯示輸出。以及，獲取用戶(hù)輸入的頁(yè)面參數(shù)，根據(jù)所述頁(yè)面參數(shù)于預(yù)設(shè)配置文件中獲得所述頁(yè)面參數(shù)對(duì)應(yīng)的入口文件；根據(jù)所述入口文件提取待調(diào)試頁(yè)面的網(wǎng)頁(yè)代碼，根據(jù)所述瀏覽器屬性將所述網(wǎng)頁(yè)代碼編譯打包為對(duì)應(yīng)屬性的顯示代碼；通過(guò)瀏覽器將所述顯示代碼渲染后顯示輸出。

技術(shù)領(lǐng)域

本申請(qǐng)涉及前端開(kāi)發(fā)領(lǐng)域，可應(yīng)用于金融領(lǐng)域和其他領(lǐng)域，尤指一種前端項(xiàng)目調(diào)試方法及系統(tǒng)。

背景技術(shù)

在前端領(lǐng)域，通過(guò)工程化手段對(duì)項(xiàng)目進(jìn)行編譯打包的場(chǎng)景越來(lái)越多，甚至已經(jīng)成為現(xiàn)代前端項(xiàng)目主流的開(kāi)發(fā)方式。對(duì)前端項(xiàng)目進(jìn)行編譯、打包的目的在于：為了提升開(kāi)發(fā)效率，現(xiàn)在越來(lái)越多的采用高級(jí)編程語(yǔ)言的新特性來(lái)研發(fā)前端網(wǎng)站，但這些高級(jí)開(kāi)發(fā)語(yǔ)言對(duì)低版本瀏覽器的兼容性并不友好，所以需要使用工具來(lái)自動(dòng)把代碼轉(zhuǎn)換成低版本瀏覽器能識(shí)別的通用代碼。現(xiàn)今主流的三大前端開(kāi)發(fā)框架Vue、React、Angular都采用組件化開(kāi)發(fā)的模式，也就是會(huì)把一個(gè)頁(yè)面拆分成很多個(gè)小的組件來(lái)開(kāi)發(fā)，可以達(dá)到多人并行開(kāi)發(fā)每個(gè)組件，以及提升組件復(fù)用率的目的。但是瀏覽器同樣也不支持這種組件化的代碼識(shí)別模式，所以需要使用工具把這種組件化模式開(kāi)發(fā)的代碼轉(zhuǎn)換成瀏覽器能識(shí)別的代碼。還有很多原因讓們編譯和打包前端代碼，如：把代碼壓縮以減小文件大小，從而降低網(wǎng)絡(luò)耗時(shí)，提升網(wǎng)頁(yè)打開(kāi)速度，等等。

現(xiàn)有的前端項(xiàng)目開(kāi)發(fā)、調(diào)試過(guò)程如下：開(kāi)發(fā)人員寫(xiě)完代碼之后，使用工程化打包工具(如：webpack)把項(xiàng)目中所有的代碼進(jìn)行編譯、代碼壓縮、然后打包，轉(zhuǎn)換成瀏覽器能識(shí)別的可運(yùn)行代碼。在這些編譯打包完成后，工程化打包工具會(huì)在電腦上啟動(dòng)一個(gè)開(kāi)發(fā)服務(wù)器，然后開(kāi)發(fā)人員就可以打開(kāi)瀏覽器輸入網(wǎng)址，查看開(kāi)發(fā)出的網(wǎng)站效果，然后再持續(xù)的進(jìn)行調(diào)試和修改。時(shí)序圖如圖1所示，其流程包含：1、開(kāi)發(fā)人員在開(kāi)發(fā)工具中輸入命令啟動(dòng)構(gòu)建工具；2、構(gòu)建工具會(huì)遍歷項(xiàng)目中所有的前端頁(yè)面依次對(duì)所有頁(yè)面進(jìn)行“編譯、打包”，有多少頁(yè)面都會(huì)依次順序執(zhí)行，項(xiàng)目中頁(yè)面數(shù)量越多，過(guò)程耗時(shí)越久；3、當(dāng)“編譯、打包”完成后，構(gòu)建工具會(huì)啟動(dòng)“開(kāi)發(fā)服務(wù)器”；4、“開(kāi)發(fā)服務(wù)器”啟動(dòng)成功后，開(kāi)發(fā)人員就可以在瀏覽器中打開(kāi)頁(yè)面查看效果；上述過(guò)程是打開(kāi)一個(gè)頁(yè)面的整體流程。如果開(kāi)發(fā)人員修改了一行代碼，需要重新預(yù)覽一下效果。那么就需要重復(fù)1～4步，如果有100個(gè)頁(yè)面，那么幾十另外99個(gè)頁(yè)面沒(méi)有做任何變化，也需要把它們都“編譯、打包”，才能看到另一個(gè)頁(yè)面的預(yù)覽效果。

現(xiàn)有的技術(shù)方案，雖然能有效地把高級(jí)語(yǔ)言代碼轉(zhuǎn)換成瀏覽器可運(yùn)行的代碼。但是這種方案存在一個(gè)重大缺陷：如果網(wǎng)站只有一個(gè)頁(yè)面，那么這種方案還暴露不出問(wèn)題。但實(shí)際上網(wǎng)站往往會(huì)有幾十甚至上百個(gè)頁(yè)面，會(huì)有如下問(wèn)題：如果這個(gè)網(wǎng)站中有100個(gè)頁(yè)面，使用工程化的方式編譯、打包一個(gè)頁(yè)面需要5秒鐘，那么這100個(gè)頁(yè)面就是500秒，也就是8分鐘多。這是什么概念呢，也就是開(kāi)發(fā)人員開(kāi)發(fā)出網(wǎng)站，編譯打包需要8分鐘，然后才能在瀏覽器打開(kāi)網(wǎng)頁(yè)看到效果。并且，開(kāi)發(fā)人員在網(wǎng)站開(kāi)發(fā)過(guò)程中，需要頻繁的修改代碼，然后再重新便宜、打包，再到瀏覽器里查看運(yùn)行效果。而如果每次修改代碼后都要等8分鐘才能看到效果，這將是開(kāi)發(fā)人員的噩夢(mèng)。在實(shí)際的網(wǎng)站開(kāi)發(fā)過(guò)程中，即使項(xiàng)目里有100個(gè)頁(yè)面，對(duì)于當(dāng)前這個(gè)開(kāi)發(fā)人員來(lái)說(shuō)，他在當(dāng)前這段時(shí)間內(nèi)只會(huì)對(duì)某一兩個(gè)頁(yè)面進(jìn)行開(kāi)發(fā)和調(diào)試工作，不可能同時(shí)做這100個(gè)頁(yè)面，也就是說(shuō)，并需要同時(shí)把這100個(gè)頁(yè)面都進(jìn)行編譯、打包，但是現(xiàn)有的開(kāi)發(fā)、調(diào)試方案并沒(méi)有對(duì)此做出改善。

發(fā)明內(nèi)容

本申請(qǐng)目的在于提供一種前端項(xiàng)目調(diào)試方法及系統(tǒng)，既能夠快速把代碼編譯、打包成瀏覽器識(shí)別代碼的需求，又能解決現(xiàn)有技術(shù)“編譯、打包效率低”、“不能按需要打包”的問(wèn)題。