開發(fā)中明顯可以感覺到加載一個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依賴，有時還會面臨著一個文件不夠需要拆分成幾個文件的情況。因此可能會遇到以下幾點問題：
- 管理依賴會成為一個很費時的工作，很可能引入的文件順序出現(xiàn)錯誤前端交互就不可以使用了。
- 當頁面加載的時候所有依賴會被全部同步加載，這樣也很難實現(xiàn)所有依賴按需加載的高級功能。
- 在團隊協(xié)作開發(fā)中，出現(xiàn)管理全局變量，變量命名空間困難的問題。
而前端要使用模塊化的原因或者要解決的問題就是：
- 解決命名沖突
- 管理依賴
- 提高代碼的可復用性
相關模塊化規(guī)范
常見的規(guī)范有 CMD、AMD、CommonJS 規(guī)范
- CMD規(guī)范（Common Module Definition）：是sea.js在推廣過程中對模塊定義的規(guī)范化產出，主要用于瀏覽器端。它主要特點是：對于依賴的模塊是延遲執(zhí)行，依賴可以就近書寫，等到需要用這個依賴的時候再引入這個依賴。
- AMD規(guī)范（Asynchronous Module Definition）：是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產出，也是主要用于瀏覽器端。其特點是：依賴前置，需要在定義時就寫好需要的依賴，提前執(zhí)行依賴。
- CommonJS規(guī)范是在服務器端模塊的規(guī)范，是同步加載的，應用有node.js。
ES6 助推了前端模塊化，import語法會被JavaScript引擎靜態(tài)分析，這是一個很重要的功能，我們通常使用CommonJS時，代碼都是在運行時加載的，而ES6是在編譯時就引入模塊代碼，當然我們現(xiàn)在的瀏覽器還沒有這么強大的功能，需要借助各類的編譯工具（webpack）才能正確的姿勢來使用ES6的模塊化的功能。也正因為能夠編譯時就引入模塊代碼，所以使得靜態(tài)分析就能夠實現(xiàn)了。
ES6模塊化的優(yōu)點有
- 靜態(tài)化編譯。如果能夠靜態(tài)化，編譯的時候就能確定模塊的依賴關系，以及輸出和輸入的變量。CommonJS和AMD/CMD都只能在運行代碼時才能確定這些關系。
- 不需要特殊的UMD模塊化格式（Universal Module Definition（通用模塊規(guī)范）是由社區(qū)想出來的一種整合了CommonJS和AMD兩個模塊定義規(guī)范的方法）。不再需要UMD模塊的格式，將來服務器和瀏覽器都會支持ES6模塊格式。目前各種工具庫（webpack）其實已經做到這一點了。
- 目前的各類全局變量都可以模塊化。比如navigator現(xiàn)在是全局變量，以后就可以模塊化加載。這樣就不再需要對象作為命名空間。
