前端模塊化的意義

開發中明顯能夠感受到加載一個HTML須要依賴不少的JS文件依賴，好比到必定階段的HTML頁面，尾部就是這樣的：

<script src="/public/vendors/jquery/js/jquery.min.js"></script>
<script src="/public/vendors/popper.js/js/popper.min.js"></script>
<script src="/public/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="/public/vendors/pace-progress/js/pace.min.js"></script>
<script src="/public/vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
<script src="/public/vendors/@coreui/coreui-pro/js/coreui.min.js"></script>
<script src="/public/vendors/moment/js/moment.min.js"></script>
<script src="/public/vendors/select2/js/select2.min.js"></script>
<script src="/public/vendors/bootstrap-daterangepicker/js/daterangepicker.js"></script> 
<script src="/public/js/src/jquery.twbsPagination.js"></script>
<script src="/public/js/src/HZRecorder.js"></script>

隨着所需功能愈來愈多，咱們就需引入更多的JS依賴和CSS依賴，有時還會面臨着一個文件不夠須要拆分紅幾個文件的狀況。所以可能會遇到如下幾點問題：

• 管理依賴會成爲一個很費時的工做，極可能引入的文件順序出現錯誤前端交互就不可使用了。
• 當頁面加載的時候全部依賴會被所有同步加載，這樣也很難實現全部依賴按需加載的高級功能。
• 在團隊協做開發中，出現管理全局變量，變量命名空間困難的問題。

而前端要使用模塊化的緣由或者要解決的問題就是：

• 解決命名衝突
• 管理依賴
• 提升代碼的可複用性

相關模塊化規範

常見的規範有 CMD、AMD、CommonJS 規範

• CMD規範（Common Module Definition）：是sea.js在推廣過程當中對模塊定義的規範化產出，主要用於瀏覽器端。它主要特色是：對於依賴的模塊是延遲執行，依賴能夠就近書寫，等到須要用這個依賴的時候再引入這個依賴。
• AMD規範（Asynchronous Module Definition）：是 RequireJS 在推廣過程當中對模塊定義的規範化產出，也是主要用於瀏覽器端。其特色是：依賴前置，須要在定義時就寫好須要的依賴，提早執行依賴。
• CommonJS規範是在服務器端模塊的規範，是同步加載的，應用有node.js。

ES6 助推了前端模塊化，import語法會被JavaScript引擎靜態分析，這是一個很重要的功能，咱們一般使用CommonJS時，代碼都是在運行時加載的，而ES6是在編譯時就引入模塊代碼，固然咱們如今的瀏覽器尚未這麼強大的功能，須要藉助各種的編譯工具（webpack）才能正確的姿式來使用ES6的模塊化的功能。也正由於可以編譯時就引入模塊代碼，因此使得靜態分析就可以實現了。

ES6模塊化的優勢有

• 靜態化編譯。若是可以靜態化，編譯的時候就能肯定模塊的依賴關係，以及輸出和輸入的變量。CommonJS和AMD/CMD都只能在運行代碼時才能肯定這些關係。
• 不須要特殊的UMD模塊化格式（Universal Module Definition（通用模塊規範）是由社區想出來的一種整合了CommonJS和AMD兩個模塊定義規範的方法）。再也不須要UMD模塊的格式，未來服務器和瀏覽器都會支持ES6模塊格式。目前各類工具庫（webpack）其實已經作到這一點了。
• 目前的各種全局變量均可以模塊化。好比navigator如今是全局變量，之後就能夠模塊化加載。這樣就再也不須要對象做爲命名空間。

參考連接：javascript模塊化之CommonJS、AMD、CMD、UMD、ES6