1、概述
在js的歷史上一直沒有模塊（module）體系，無法將一個大程序拆分成相互依賴的小文件，再用簡單的方法拼裝起來，這對開發大型的、復雜的項目形成了巨大障礙。
在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，后者用於瀏覽器。ES6 在語言標准的層面上，實現了模塊功能，
而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案。
2、ES6 模塊（module）的設計思想是什么？
那就是盡量的靜態化，使得編譯時就能確定依賴關系
3、CommonJS模塊 和 ES6 模塊比較
看兩段代碼
// 導出 node 文件系統的幾個方法
let {stat,exists,readFile} = require('fs');
注意：這段代碼實際上是加載了整個 fs 模塊。這種加載方式稱為“運行時加載”，因為只有運行時才能得到這個對象。導致完全沒辦法在編譯時做“靜態優化”。
// ES6 模塊
import {stat,exists,readFile} from 'fs'
注意：這段代碼只導出了三個方法，其他的方法沒有加載。這種方式稱為“編譯時加載”，ES6可以在編譯時就完成模塊加載，效率要比CommonJS模塊的加載方式高。
4、模塊功能命令之 export 和 import。
模塊功能主要有兩個命令構成：export 和 import。 export 命令用於規定模塊的對外接口，import命令用於輸入其他模塊提供的功能。
一個js文件就是一個模塊，該文件內部的所有變量，外部無法獲取，如果你希望外部能夠讀取模塊內部某個變量，就必須使用export關鍵字輸出該變量。
輸出變量：
//eg:對外部輸出三個變量----》聲明后輸出
// js 文件內部
export var name = 'zjl'
export var age = 18
export var gender = '男'
// eg:對外輸出三個變量-----》先聲明再輸出 優先使用這種寫法
var name = 'zjl'
var age = 18
var gender = '男'
export {name,age,gender}
輸出函數：
export function test(x,y){ return x*y; }
export 輸出的變量或函數都有自己的名字，我們也可以重命名：
function test(){...} function test2(){....} function test3(){...} export {test as fun1,test2 as fun2,test3 as fun3}
注意：export 命令規定的是對外接口，接口名與模塊內部變量之間，必須與模塊的變量建立一一對應關系。（有種鍵值對的意思），
簡單來說導出的變量他必須有一個值。
export 語句不能放在代碼塊內，如函數內，否則會報錯。因為此做法使其無法做到靜態化，違背了 ES6 模塊的設計理念。
import 命令
通過 export 定義了模塊的接口之后，我們可以通過import 命令加載這個模塊。
載入模塊方式：
// 大括號內的變量名，必須跟 export 對外接口的變量名一致 import {name,age,gender} from './XXX.js'
// 重命名
iport {name as username};
注意幾個 import 關鍵點
①import 導入的值都是只讀的，不允許修改輸入的接口。
②可以修改導入的對象 ，可以修改導入對象的屬性，但不推薦這樣做，建議把導入的變量（不管是普通變量還是對象）都當做只讀的。
③import.....from 中 from 后面的路徑可以是絕路徑也可以是相對路徑。
④js模塊導入時可以省略后面 的 .js后綴。
⑤import 命令具有提升效果，它會把import命令提升到模塊的頭部，首先執行。
⑥執行同一個import命令多次，默認只會執行一次，不會執行多次
import {name} from './XXX.js'
import {name} from './XXX.js'
//只會執行一次
⑦從同一個模塊通過多條import加載不同變量，但它們對應的是同一個模塊實例。import語句是 單例模式（Singleton）
import {name} from './a.js'
import {age} from 'a.js'
// 單例模式
⑧不推薦 import 和 require 在同一個模塊使用，因為他們的執行時期不一樣，導致的結果可能就不一樣。
目前在模塊中使用 require 還需要 Babel 轉換比較麻煩。
⑨整體加載模塊
import * as user from './a.js' // 導出 a 模塊的所有值並命名為 user（一個對象）
5、模塊功能命令之 export default
我們通過前面了解到 import 導入 export 對外接口 需要知道對外接口的准確名稱，才能拿到對應的值，這樣是比較麻煩的。為此ES6還提供了 export default 命令，
使用 export default 導出的值，import導入可以為這個導出值自定義名稱。
// 導出模塊 a.js，導出一個匿名函數 export default function (){...} //導入模塊 b.js, import fun from './a.js'; // fun還可以為其他合法的名稱
默認輸出（export default）注意點：
①export default 只能使用一次，export可以使用多次
②后面不能跟變量聲明語句
export default var a=10; // 寫法錯誤
③export default a 的含義就是jiang將變量 a 的值賦給變量 default，所以上面那種寫法是錯誤的。
④ export 導出一定要指定對外接口 而 export default 不需要。
⑤export 和 export default 能一起使用。
6、export 和 import 的復合寫法。
export {name,age} from 'a.js' // 這種寫法相當於轉發了這兩個接口，沒有實際導入當前模塊，當前模塊不能直接使用這兩個變量。
// 可以寫成兩句,實際導入當前模塊
import {name,age} from 'a.js'
export {name,age};
7、介紹到此結束。