資訊專欄INFORMATION COLUMN
摘要：前言之前也是從過(guò)來(lái)的，到現(xiàn)在的中間有些問(wèn)題沒怎么細(xì)想，比如明明是構(gòu)建工具為什么調(diào)試總是要開啟一個(gè)服務(wù)之類的，現(xiàn)在就來(lái)簡(jiǎn)單梳理下思路最原始的構(gòu)建工具無(wú)非是這樣改動(dòng)了某個(gè)資源文件，要手動(dòng)運(yùn)行構(gòu)建命令才能重新構(gòu)建，重新構(gòu)建的時(shí)候構(gòu)建工具將所有資源
前言
之前也是從grunt/gulp/fis/過(guò)來(lái)的，到現(xiàn)在的webpack,中間有些問(wèn)題沒怎么細(xì)想，比如明明是構(gòu)建工具為什么調(diào)試總是要開啟一個(gè)http服務(wù)之類的，現(xiàn)在就來(lái)簡(jiǎn)單梳理下思路
最原始的構(gòu)建工具無(wú)非是這樣:
改動(dòng)了某個(gè)資源文件， 要手動(dòng)運(yùn)行構(gòu)建命令才能重新構(gòu)建，
重新構(gòu)建的時(shí)候構(gòu)建工具將所有資源文件重新構(gòu)建一次，再合并打包.
你要手動(dòng)刷新頁(yè)面才能加載到到最新的構(gòu)建完成的資源文件
而我們希望構(gòu)建工具最好是這樣:
你改動(dòng)了某個(gè)資源文件，構(gòu)建工具能夠監(jiān)聽到這個(gè)變化，自動(dòng)進(jìn)行重新構(gòu)建
構(gòu)建工具重新構(gòu)建的時(shí)候并不會(huì)將所有的資源文件全部構(gòu)建， 而是將變化了的資源文件重新構(gòu)建，再將這個(gè)變化了的資源文件和其他的資源文件合并打包
構(gòu)建完成之后能夠自動(dòng)刷新你的調(diào)試頁(yè)面(當(dāng)然如果能類似ajax無(wú)刷新加載就更好了)
核心功能輕量，通過(guò)plugin來(lái)拓展其他功能，比如編譯coffee/typescript/tpl/sass等
實(shí)現(xiàn)原理 資源文件修改自動(dòng)編譯監(jiān)聽資源的修改實(shí)現(xiàn)自動(dòng)編譯是構(gòu)建工具要實(shí)現(xiàn)的基本功能，其原理是
node有api能夠可以監(jiān)聽單個(gè)資源文件的狀態(tài)(fs.watch)，當(dāng)資源文件發(fā)生變化，能夠觸發(fā)回調(diào)通知node, 這也是許多基于node的構(gòu)建工具實(shí)現(xiàn)核心. 當(dāng)然強(qiáng)大的node社區(qū)還出了監(jiān)聽文件夾的node模塊比如Chokidar
構(gòu)建工具監(jiān)聽到了某個(gè)資源文件的變化，重新構(gòu)建一遍這個(gè)資源文件,然后在最后打包的階段和其他沒有變化的之前已經(jīng)構(gòu)建好的資源文件合在一起重新打包成aio(all in one)
構(gòu)建工具監(jiān)聽到了某個(gè)資源文件的變化，重新構(gòu)建一遍這個(gè)資源文件,然后在之前構(gòu)建的aio中抽離出這個(gè)資源文件變化前的邏輯，填入變化后的邏輯, 連一塊打包都省了,不過(guò)實(shí)現(xiàn)起來(lái)邏輯比較復(fù)雜.
頁(yè)面自動(dòng)加載新資源以方便調(diào)試要實(shí)現(xiàn)這種功能，一般要在本機(jī)建立一個(gè)簡(jiǎn)單的http server，構(gòu)建工具構(gòu)建完成之后將文件整個(gè)放置在server目錄.
并且在開發(fā)環(huán)境(dev)中，構(gòu)建工具構(gòu)建出來(lái)的最終的頁(yè)面文件除了你的業(yè)務(wù)代碼，一般還會(huì)引入一段socket的相關(guān)代碼，通過(guò)socket使得client能夠一直和server保持通信.比如你構(gòu)建完成之后，通過(guò)127.0.0.1:port/index.html調(diào)試頁(yè)面，你這個(gè)index.html中嵌入了了socket的代碼(當(dāng)然，生產(chǎn)環(huán)境(prod)不會(huì)把socket的功能打包進(jìn)去的)
有了socket使得服務(wù)端和客戶端保持通信連接，服務(wù)器推動(dòng)客戶端刷新就很容易實(shí)現(xiàn)了. 處理方式有兩種，同步刷新和異步熱加載
如果服務(wù)器資源發(fā)生了變化，服務(wù)器會(huì)通過(guò)socket來(lái)向客戶端發(fā)送指令，客戶端socket捕獲到這條指令，就刷新頁(yè)面來(lái)重載新的資源.
如果服務(wù)器發(fā)生了變化，服務(wù)器會(huì)通過(guò)socket來(lái)向客戶端發(fā)送指令，客戶端socket捕獲到這條指令，異步向服務(wù)器拉去新的資源，來(lái)實(shí)現(xiàn)無(wú)刷新異步重載.
通過(guò)plugin來(lái)拓展其他功能絕大多數(shù)構(gòu)建工具都是通過(guò)插件拓展的，就不說(shuō)了
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/80870.html
摘要：前言之前也是從過(guò)來(lái)的，到現(xiàn)在的中間有些問(wèn)題沒怎么細(xì)想，比如明明是構(gòu)建工具為什么調(diào)試總是要開啟一個(gè)服務(wù)之類的，現(xiàn)在就來(lái)簡(jiǎn)單梳理下思路最原始的構(gòu)建工具無(wú)非是這樣改動(dòng)了某個(gè)資源文件，要手動(dòng)運(yùn)行構(gòu)建命令才能重新構(gòu)建，重新構(gòu)建的時(shí)候構(gòu)建工具將所有資源 前言 之前也是從grunt/gulp/fis/過(guò)來(lái)的，到現(xiàn)在的webpack,中間有些問(wèn)題沒怎么細(xì)想，比如明明是構(gòu)建工具為什么調(diào)試總是要開啟一個(gè)h...
摘要：體驗(yàn)記錄大法好退保平安打包工具前端工程化一直是前端的一塊重點(diǎn)之前構(gòu)建工具的選擇上，公司也是很早之前就從收攏為的確是個(gè)好工具，作為工具核心的依賴表是非常好的構(gòu)建思路，也是很多大公司一直在用的構(gòu)建工具但是個(gè)人用的非常不習(xí)慣生態(tài)不是很好它太大太重 Webpack體驗(yàn)記錄 webpack大法好 退fis保平安 打包工具前端工程化一直是前端的一塊重點(diǎn).之前構(gòu)建工具的選擇上，公司也是很早之前就從g...
摘要：體驗(yàn)記錄大法好退保平安打包工具前端工程化一直是前端的一塊重點(diǎn)之前構(gòu)建工具的選擇上，公司也是很早之前就從收攏為的確是個(gè)好工具，作為工具核心的依賴表是非常好的構(gòu)建思路，也是很多大公司一直在用的構(gòu)建工具但是個(gè)人用的非常不習(xí)慣生態(tài)不是很好它太大太重 Webpack體驗(yàn)記錄 webpack大法好 退fis保平安 打包工具前端工程化一直是前端的一塊重點(diǎn).之前構(gòu)建工具的選擇上，公司也是很早之前就從g...
摘要：前言梳理一下中還不太熟悉的事件綁定統(tǒng)一用摒棄掉之前的解綁事件統(tǒng)一用語(yǔ)法糖，支持多個(gè)事件綁定同一個(gè)函數(shù)語(yǔ)法糖，支持多個(gè)事件綁定不同的函數(shù)語(yǔ)法糖，支持多個(gè)事件綁定不同的函數(shù)可以往里傳參可以給未創(chuàng)建的上綁定事件只能采取事件委托的形式所以寫成這樣是 前言 梳理一下Jquery中還不太熟悉的API Jquery事件綁定統(tǒng)一用on(摒棄掉之前的click,bind),解綁事件統(tǒng)一用off 語(yǔ)法...
閱讀 3754·2021-09-22 15:34
閱讀 1248·2019-08-29 17:25
閱讀 3463·2019-08-29 11:18
閱讀 1450·2019-08-26 17:15
閱讀 1800·2019-08-23 17:19
閱讀 1293·2019-08-23 16:15
閱讀 771·2019-08-23 16:02
閱讀 1395·2019-08-23 15:19
