概述
在ES6之前魂拦，JavaScript一直沒有模塊（module）體系讨勤，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來晨另。這對開發(fā)大型的、復雜的項目形成了障礙谱姓。
為了解決這個問題借尿，創(chuàng)造了一些模塊加載方案（如用于服務器的CommonJS，用于瀏覽器的AMD屉来、CMD）路翻，各個方案各有自己的特點，并且語法還不一樣茄靠，如果是要同時做前后端茂契，那真的是會“精分”了。
好消息是ES6給我們帶來了模塊化的設計慨绳！這完全可以取代CommonJS掉冶、AMD等規(guī)范，成為瀏覽器和服務器通用的模塊解決方案脐雪。
語法
模塊功能主要由兩個命令構成：export 和 import厌小。export 命令用于規(guī)定模塊的對外接口，import 命令用于輸入其他模塊提供的功能战秋。
export
一個模塊就是一個獨立的文件璧亚。該文件內部的所有變量，外部無法獲取脂信。如果你希望外部能夠讀取模塊內部的某個變量癣蟋，就必須使用 export 關鍵字輸出該變量透硝。
對外輸出變量
// 寫法一
export var m = 1;
// 寫法二
var m = 1;
export {m};
// 寫法三
var n = 1;
export {n as m};
需要注意的是，使用先聲明再輸出的寫法時疯搅，即使只有一個變量濒生，也不能省略 { ... }，否則會報錯秉撇。
// 報錯
var m = 1;
export m;
記住甜攀，使用 export 命令時，要提供對外的接口琐馆，而不是提供一個值规阀！
對外輸出函數(shù)
當然也可以使用類似的語法，對外輸出函數(shù)瘦麸。需要注意的點還是一樣的谁撼，對外輸出的是接口，不是函數(shù)本身滋饲。
說白了厉碟，就是 記得加上 { ... }!
// 寫法一
export function f() {};
// 寫法二
function f() {}
export {f};
// 報錯
function f() {}
export f;
import
加載變量、函數(shù)
import { m, n } from "./export.js";
需要注意的是屠缭，import 命令輸入的變量都是只讀的箍鼓，修改會報錯。這很合理呵曹，當然不能在加載模塊的腳本里改寫接口款咖。
不過如果加載的變量是一個對象，修改這個對象的屬性是允許的奄喂。
模塊的整體加載
除了指定加載某個值铐殃，還可以使用整體加載的方法，加載整個模塊的所有輸出值跨新。
語法很簡單富腊，用 * 指代“所有”即可。
import * from "./export.js";
了解了
import和export的語法之后域帐，我迫不及待地想要去嘗試了赘被，然后……
在瀏覽器中加載ES6模塊
由于粗心，沒認真了解規(guī)則肖揣，廢了好多時間帘腹，下面來說說經(jīng)驗之談。
加載規(guī)則
瀏覽器加載ES6模塊许饿，也是使用 <script> 標簽阳欲，但注意，需要加上 type="module" 屬性。
有兩種方法：
1. 通過 <script src=""> 加載js腳本
<script type="module" src="./import.js"></script>
2. 直接使用 <script> 標簽內嵌js代碼
<script type="module">
import { a } from "./export.js";
console.log(a);
</script>
面對瀏覽器的試煉...
了解了以上知識球化，想要在瀏覽器中實現(xiàn)ES6模塊的加載秽晚，還是有坑...
首先要說的是，如今（8102年）筒愚，各大主流瀏覽器都（早）已經(jīng)支持了ES6的模塊了赴蝇。千萬別再說Chrome瀏覽器沒有支持ES6的Module之類的話了。
火狐瀏覽器
火狐瀏覽器沒問題巢掺，直接打開html文件句伶，就可以完成模塊的加載。
Chrome瀏覽器
而對于Chrome瀏覽器陆淀，則會有一點問題考余。
直接打開html文件時，Chrome瀏覽器會報錯：
Access to script at 'file:///masaike' from origin 'null' has been blocked by CORS policy: The response is invalid.
這并不是Chrome不支持加載模塊轧苫，而是ES6模塊遵循同源策略楚堤。解決方法就是打開本地服務器，讓各個文件同源就可以了含懊。
參考資料
http://es6.ruanyifeng.com/#docs/module
