es6中Module 的語法總結

// 報錯
export 1;
// 報錯
var m = 1;
export m;

以上寫法都會報錯，第一種寫法直接輸出1，第二種寫法通過變數m，還是直接輸出1。1只是乙個值，不是介面

export匯出時規定的是對外的介面，就是你匯出的東西必須有乙個名字，匯入時才能找到這個名字，第二個方法之所以報錯，是因為不用大括號括起來，在編譯的時候m就變成了1，所以需要用把m變成乙個變數

第一種起名字的方法

export var/let/const 名字=值

第二種起名字的方法

var/let/const 變數=值
export  或 export

第三種起名字的方法

export default 值  //其實就是把值賦值給default變數，後面會講到

import  from 'my_module';
import  from 'my_module';
// 等同於
import  from 'my_module';

上面**中，雖然foo和bar在兩個語句中載入，但是它們對應的是同乙個my_module例項。也就是說，import語句是 singleton 模式。

整體匯入

用*代替模組中所有可匯出的內容，並用乙個物件接收，但這個物件不允許執行時改變

import  from './circle';
console.log('圓面積：' + area(4));
console.log('圓周長：' + circumference(14));

import * as circle from './circle';
console.log('圓面積：' + circle.area(4));
console.log('圓周長：' + circle.circumference(14));

import * as circle from './circle';
// 下面兩行都是不允許的
circle.foo = 'hello';
circle.area = function () {};

為了給使用者提供方便，讓他們不用閱讀文件就能載入模組，就要用到export default命令，為模組指定預設輸出。

// export-default.js
export default function ()

上面**是乙個模組檔案export-default.js，它的預設輸出是乙個函式。

其他模組載入該模組時，import命令可以為該匿名函式指定任意名字。

// import-default.js
import customname from './export-default';
customname(); // 'foo'

上面**的import命令，可以用任意名稱指向export-default.js輸出的方法，這時就不需要知道原模組輸出的函式名。需要注意的是，這時import命令後面，不使用大括號。

我們比較一下預設輸出和正常輸出。

// 第一組
export default function crc32() 
import crc32 from 'crc32'; // 輸入
// 第二組
export function crc32() ;
import  from 'crc32'; // 輸入

上面**的兩組寫法，第一組是使用export default時，對應的import語句不需要使用大括號；第二組是不使用export default時，對應的import語句需要使用大括號。

export default命令用於指定模組的預設輸出。顯然，乙個模組只能有乙個預設輸出，因此export default命令只能使用一次。所以，import命令後面才不用加大括號，因為只可能唯一對應export default命令。

本質上，export default就是輸出乙個叫做default的變數或方法，然後系統允許你為它取任意名字。所以，下面的寫法是有效的。

// modules.js
function add(x, y) 
export ;
// 等同於
// export default add;
import  from 'modules';
// 等同於
// import foo from 'modules';

正是因為export default命令其實只是輸出乙個叫做default的變數，所以它後面不能跟變數宣告語句。

// 正確
export var a = 1;
// 正確
var a = 1;
export default a;
// 錯誤
export default var a = 1;

export default命令的本質是將後面的值，賦給default變數，所以可以直接將乙個值寫在export default之後。

// 正確
export default 42;
// 報錯
export 42;

匯入預設方法

import _ from 'lodash';

如果想在一條import語句中，同時輸入預設方法和其他介面，可以寫成下面這樣。

import _,  from 'lodash';

以上內容摘自阮大神的 es6和自己總結