首先是前端是基于多語言、多層次的編碼和組織工作，其次前端產(chǎn)品的交付是基于瀏覽器均唉，這些資源是通過增量加載的方式運(yùn)行到瀏覽器端。
如何在開發(fā)環(huán)境組織好這些碎片化的代碼和資源肚菠，并且保證他們?cè)跒g覽器端快速舔箭、優(yōu)雅的加載和更新，就需要一個(gè)模塊化系統(tǒng)蚊逢。
<script>標(biāo)簽
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>
這是最原始的 JavaScript 文件加載方式层扶，如果把每一個(gè)文件看做是一個(gè)模塊，那么他們的接口通常是暴露在全局作用域下烙荷，也就是定義在 window對(duì)象中镜会，不同模塊的接口調(diào)用都是一個(gè)作用域中。
缺點(diǎn)：
- 全局作用域下容易造成變量沖突
- 文件只能按照 <script>的書寫順序進(jìn)行加載
- 開發(fā)人員必須主觀解決模塊和代碼庫(kù)的依賴關(guān)系
- 在大型項(xiàng)目中各種資源難以管理终抽，長(zhǎng)期積累的問題導(dǎo)致代碼庫(kù)混亂不堪
CommonJS
該規(guī)范的核心思想是允許模塊通過 require 方法來同步加載所要依賴的其他模塊戳表，然后通過 exports 或 module.exports 來導(dǎo)出需要暴露的接口焰薄。
require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;
優(yōu)點(diǎn)：
- 服務(wù)器端模塊便于重用
- NPM 中已經(jīng)有將近20萬個(gè)可以使用模塊包
- 簡(jiǎn)單并容易使用
缺點(diǎn)：
- 同步的模塊加載方式不適合在瀏覽器環(huán)境中，同步意味著阻塞加載扒袖，瀏覽器資源是異步加載的
- 不能非阻塞的并行加載多個(gè)模塊
實(shí)現(xiàn)：
- 服務(wù)器端的 Node.js
- Browserify塞茅，瀏覽器端的 CommonJS 實(shí)現(xiàn)，可以使用 NPM 的模塊季率，但是編譯打包后的文件體積可能很大
- modules-webmake野瘦，類似Browserify，還不如 Browserify 靈活
- wreq飒泻，Browserify 的前身
友情小Tips：服務(wù)器端的 Node.js 遵循 CommonJS規(guī)范鞭光，在ES6標(biāo)準(zhǔn)發(fā)布后module成為標(biāo)準(zhǔn)。標(biāo)準(zhǔn)的使用export指令導(dǎo)出接口泞遗，以import引入模塊惰许，但是在我們一貫的node模塊中，我們?nèi)匀徊捎肅ommonJs規(guī)范史辙。
nodejs v6+ 開始支持 90% 以上的 ES6汹买，however，import還暫不支持聊倔。
ES6 模塊
EcmaScript6 標(biāo)準(zhǔn)增加了 JavaScript 語言層面的模塊體系定義晦毙。ES6 模塊的設(shè)計(jì)思想，是盡量的靜態(tài)化耙蔑，使得編譯時(shí)就能確定模塊的依賴關(guān)系见妒，以及輸入和輸出的變量。CommonJS 和 AMD 模塊甸陌，都只能在運(yùn)行時(shí)確定這些東西须揣。
import "jquery";
export function doStuff() {}
module "localModule" {}
優(yōu)點(diǎn)：
- 容易進(jìn)行靜態(tài)分析
- 面向未來的 EcmaScript 標(biāo)準(zhǔn)
缺點(diǎn)：
- 原生瀏覽器端還沒有實(shí)現(xiàn)該標(biāo)準(zhǔn)
*全新的命令字，新版的 Node.js才支持
實(shí)現(xiàn)：
