概述
歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支持都沒有，這對開發大型的、復雜的項目形成了巨大障礙。
在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，后者用於瀏覽器。ES6 在語言標准的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案。
ES6 模塊的設計思想是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。比如，CommonJS 模塊就是對象，輸入時必須查找對象屬性。
模塊功能主要由兩個命令構成：export和import。export命令用於規定模塊的對外接口（即導出模塊），import命令用於輸入模塊（即導入模塊）。
其中使用import命令的時候，用戶需要知道所要加載的變量名或函數名，否則無法加載，所以ES6為用戶提供了更方便的方法export default
用法
其中 export default、export、import 屬於ES6產物，module.exports和require屬於node.js產物。
node中導入模塊：var 名稱 = require('模塊標識符')
node中向外暴露成員的形式：module.exports = {}
export
用法1
export var firstName = 'Michael'; export var lastName = 'Jackson'; export var year = 1958;
上面代碼ES6 將其視為一個模塊，里面用export命令對外部輸出了三個變量。
用法2
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { firstName, lastName, year };
上面代碼在export命令后面，使用大括號指定所要輸出的一組變量。它與前一種寫法（直接放置在var語句前）是等價的，但是應該優先考慮使用這種寫法。因為這樣就可以在腳本尾部，一眼看清楚輸出了哪些變量。
用法3
export function multiply(x, y) {
return x * y;
}
//export命令除了輸出變量，還可以輸出函數或類（class）
通常情況下，export輸出的變量就是本來的名字，但是可以使用as關鍵字重命名。
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
//上面代碼使用as關鍵字，重命名了函數v1和v2的對外接口。重命名后，v2可以用不同的名字輸出兩次。
//as的作用 => 將 xxx 重新命名為 xxx
需要特別注意的是，export命令規定的是對外的接口，必須與模塊內部的變量建立一一對應關系。
// 報錯 export 1; // 報錯 var m = 1; export m; //上面兩種寫法都會報錯，因為沒有提供對外的接口。第一種寫法直接輸出 1，第二種寫法通過變量m，還是直接輸出 1
也就是說用export 導出模塊的時候，如果變量或函數提前定義好了導出是必須加 {}, 如果沒有提前定義導出是必須以命名（定義的）的方式
// 報錯
export 1;
// 報錯
var m = 1;
export m;
// 報錯
function f() {}
export f;
// 正確
export var m = 1;
// 正確
var m = 1;
export {m};
// 正確
var n = 1;
export {n as m};
// 正確
export function f() {};
// 正確
function f() {}
export {f};
import
注意2點
1、由於import是靜態執行，所以不能使用表達式和變量，這些只有在運行時才能得到結果的語法結構。
// 報錯
import { 'f' + 'oo' } from 'my_module';
// 報錯
let module = 'my_module';
import { foo } from module;
// 報錯
if (x === 1) {
import { foo } from 'module1';
} else {
import { foo } from 'module2';
}
2、模塊的整體加載 （除了指定加載某個輸出值，還可以使用整體加載，即用星號（*）指定一個對象，所有輸出值都加載在這個對象上面）
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
import 導入上面代碼所有值方式
import * as circle from './circle';
console.log('圓面積：' + circle.area(4));
console.log('圓周長：' + circle.circumference(14));
export default
export default命令，為模塊指定默認輸出。export default如果導出變量時必須時匿名，如果導出函數時可以時命名也可以匿名
導出變量
// 正確 var a = 1; export default a; //或者 export default 1; //這樣做沒有實際意思 // 錯誤 export default var a = 1;
導出函數
export default function () {
console.log('foo');
}
//或者
export default function foo() {
console.log('foo');
}
// 或者
function foo() {
console.log('foo');
}
export default foo;
export default命令用於指定模塊的默認輸出。顯然，一個模塊只能有一個默認輸出，因此export default命令只能使用一次。所以，import命令后面才不用加大括號，因為只可能唯一對應export default命令。
本質上，export default就是輸出一個叫做default的變量或方法，然后系統允許你為它取任意名字。所以，下面的寫法是有效的。
所以通過以上用法可以總結export default和export區別
1、export default 向外暴露的成員，可以使用任意變量來接收
2、在一個模塊中，export default 只允許向外暴露一次
3、在一個模塊中，可以同時使用export default 和export 向外暴露成員
4、使用export向外暴露的成員，只能使用{ }的形式來接收，這種形式，叫做【按需導出】
5、export可以向外暴露多個成員，同時，如果某些成員，在import導入時，不需要，可以不在{ }中定義
6、使用export導出的成員，必須嚴格按照導出時候的名稱，來使用{ }按需接收
7、使用export導出的成員，如果想換個變量名稱接收，可以使用as來起別名