## 一、概述 歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的`require`、Python 的`import`，甚至就連 CSS 都有`@import`，但是 JavaScript 任何這方面的支持都沒有，這對開發大型的、復雜的項目形成了巨大障礙； 在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務器，后者用于瀏覽器。 ES6 在語言標準的層面上，實現了模塊功能，而且實現得相當簡單，完全可以**取代 CommonJS 和 AMD 規范**，成為瀏覽器和服務器通用的模塊解決方案； ## 二、特點 ES6 模塊不是對象，而是通過`export`命令顯式指定輸出的代碼，再通過`import`命令輸入； 模塊功能主要由兩個命令構成：`export`和`import`；`export`命令用于規定模塊的對外接口，`import`命令用于輸入其他模塊提供的功能； ## 三、export 一個模塊就是一個獨立的文件。該文件內部的所有變量、函數、類，外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變量、函數、類，就必須使用`export`關鍵字輸出； 1、`export`輸出的變量、函數、類就是本來的名字，但是可以使用`as`關鍵字重命名； 2、`export`命令可以出現在模塊的任何位置，只要處于模塊頂層就可以。如果處于塊級作用域內，就會報錯； 3、`export`命令規定的是對外的接口，必須與模塊內部的變量、函數、類建立一一對應關系； ## 四、import 使用`export`命令定義了模塊的對外接口以后，其他 JS 文件就可以通過`import`命令加載這個模塊； 1、`import`命令接受一對大括號，里面指定要從其他模塊導入的變量名。大括號里面的變量名，必須與被導入模塊（`profile.js`）對外接口的名稱相同； 2、如果想為輸入的變量重新取一個名字，`import`命令要使用`as`關鍵字，將輸入的變量重命名； 3、`import`后面的`from`指定模塊文件的位置，可以是**相對路徑**，也可以是**絕對路徑**。如果不帶有路徑，只是一個模塊名，那么**必須有配置文件**，告訴 JavaScript 引擎該模塊的位置； 4、`import`語句會執行所加載的模塊； 5、除了指定加載某個輸出值，還可以使用整體加載，即用星號（`*`）指定一個對象，所有輸出值都加載在這個對象上面； ## 五、export default 使用`import`命令的時候，用戶需要知道所要加載的變量名或函數名，否則無法加載。但是，用戶肯定希望快速上手，未必愿意閱讀文檔，去了解模塊有哪些屬性和方法。為了給用戶提供方便，讓他們不用閱讀文檔就能加載模塊，就要用到`export default`命令，為模塊指定默認輸出。 ## 六、參考 詳細的模塊化知識，參考：[前端技術/標準擴展/javascript/TypeScript/模塊化](../../%E6%A0%87%E5%87%86%E6%89%A9%E5%B1%95/javascript/TypeScript/%E6%A8%A1%E5%9D%97%E5%8C%96.md)