理解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声明的变量, 不可更改, 也同时存在暂时性死区, 如有理解错误的地方还请不吝指教