歡迎訪問巨立鑫電腦培訓官方網站! 網址:http://www.deanlusk.com

在線報名 | 聯系我們

軟件編程 平面設計 APP開發 弱電工程

前端模塊化

    模塊化的目的是使代碼可以重用,模塊化在任何開發中都是必不可少的。前端的模塊化是Node.js帶來的新產物,若干年前,前端模塊化的需求并不是很強烈,因為在瀏覽器里運行的邏輯都比較簡單。隨著Node.js的出現,JavaScript開始在后端發揮作用,為了代碼重用,模塊化就變得不可或缺。隨著前端快速發展,前端業務越來越復雜,模塊化的需求開始出現。
   為了實現模塊化,出現了用于JavaScript模塊管理的兩大流行規范:CommonJS和AMD。前者定義的是模塊的同步加載,主要用于Node.js。同步加載在前端會導致整個頁面等待,對前端并不適用,便出現了AMD。AMD采用異步加載方式,通過RequireJS等工具適用于前端。以RequireJS為例,這是一種在線“編譯”模塊的方案,相當于在瀏覽器中先加載一個AMD解釋器,使瀏覽器認識define、exports、module等相關命令,來實現模塊化。后來ES 6提供了對模塊的原生支持,它的目標是創建一種CommonJS和AMD使用者都愿意接受的方式,既擁有簡潔的語法,又支持異步加載和配置模塊加載。
   而目前更通用的是browserify、webpack等技術,是一個預編譯模塊的方案。這個方案更加智能,因為它是在發布前預編譯好的,不需要在瀏覽器中加載解釋器。另外,直接寫AMD或ES 6的模塊化代碼,它都能編譯成瀏覽器識別的JavaScript代碼。甚至CommonJS規范的模塊化,browserify、webpack也可以轉換成瀏覽器使用的形式。webpack相當于加強版browserify,誕生伊始,瞄準的就是大型單頁應用,而且其對React的支持是最好的,所以在本書中主要介紹webpack。
   webpack是一個供瀏覽器環境使用的模塊打包工具。webpack將項目中用到的一切靜態資源都視為模塊,模塊之間可以互相依賴,webpack對它們進行統一的管理及打包發布。下面引用webpack官方圖片來說明webpack的作用。
   從圖中可以看出,webpack的作用是對項目中的靜態資源進行統一管理,為項目的發布提供最優的打包和部署方案,可以把應用中的js、css、圖片等資源集中打成一個或多個包文件。它具備編譯打包css、預處理css、編譯js和處理圖片等許多功能,支持AMD和CommonJS規范,以及多種系統模塊,現在已成為前端打包的主流工具。
 
webpack的主要特性如下:
 
(1)同時支持CommonJS和AMD模塊。
 
(2)串聯式模塊加載器及插件機制,具有更好的靈活性和擴展性,例如對CoffeeScript、ES 6的支持。
 
(3)可以基于配置或者智能分析打包成多個文件,實現分別滿足公共模塊和按需加載的需要。
 
(4)支持對css、圖片等資源進行打包,無須依靠grunt或gulp等構建工具,簡化工程配置。
 
(5)開發時在內存中完成打包,性能更高,完全可以支持開發過程的實時打包需求。
 
(6)對sourcemap有很好的支持,易于調試.

在線留言

*將嚴格保護您的信息請放心填寫

熱門案例

更多 +

幫助中心

在線報名 聯系我們

咨詢電話(9:00-17:00)

0551-65571116
13225607766

在線客服

點擊咨詢

掃一掃咨詢

移動端查看

在線咨詢
手機請直接輸入:如1860086xxxx
座機前加區號:如0105992xxxx
輸入您的電話號碼,點擊通話,稍后您將接到我們的電話,該通話對您完全免費,請放心接聽!
掃描二維碼
国产美女a做受大片观看_一个人看的www在线高清视频_女人和公牛做了好大好爽_东北老女人下面痒大叫