理解ES6的模塊導入與導出

export

export后必須跟語句, 何為語句, 如聲明, for, if 等都是語句, export 不能導出匿名函數, 也不能導出某個已經聲明的變量, 如:

export const bar = function() {};	// 合法
export bar;							// 非法
export 1;							// 非法
export function foo () {};			// 合法, 后跟的是聲明語句
export { foo };						// 合法, 后面跟的{}理解為語句, 就像if后面的{}一樣
export { foo as bar };				// 合法
export { foo: foo };				// 非法, 后面的{}被解析成對象

export default

export default在整個模塊中只能出現一次, 后只能具體的值, 何為具體的值, 如1, 2, 3, 再比如一個函數聲明(非表達式), 或者是一個類聲明(與函數聲明一個意思), 或者匿名函數, 只要是能用變量接受的都可以, 例子:

export default 1;					// 合法
export default function foo() {};	// 合法, 因為function foo() {} 能被變量接受, 如 var bar = function foo() {}
export default const bar = 1;		// 非法, 因為var a = const bar = 1 是不合法的
export default { foo };				// 合法, {} 被理解為一個對象
export default { foo: foo };		// 合法, 同上

導出語句只能出現在模塊的頂級作用域中, 不能被其他語句包含

import

import語法為:

import { x, y } from './test.js';
import * as some from './test.js';	// 命名空間導入
import './test.js';
import { default as test } from './test.js';

導入再導出

export { some } from './test.js';
export * from './test.js';

導入后跟需要導入的綁定和模塊說明符, 導入綁定的列表並非對象的解構, 二者並無關聯, 導入的標識符很像const聲明的變量, 不可更改, 也同時存在暫時性死區, 如有理解錯誤的地方還請不吝指教