ES6 export命令和import命令

模块功能主要由两个命令构成：export和import。
一个模块就是一个单独的文件，这个文件中的变量，外部是无法获得的。如果想在外部获得这个变量，只有在文件内部使用export导出这个变量，然后在外部import导入这个变量。

export命令

export可以导出一些变量、函数、数组、常量等。
例如，在variable.js文件中，定义了两个变量：a、b，那么要在外部使用者两个变量，可以使用exoprt导出这个两个变量：

export var a = 10;
export function fo() {
  ......
};

上面的写法，可以换一种方式：（推荐只用下面这种方式，更直观）

var a = 10;
function fo() {
  ......
};
export {a, fo};

名称

export导出的变量的名称，通常情况下，就是变量原来的名称（以上例子中，导出的变量名称就是a和fo）。但是可以使用as关键字来重命名：

......
export {a as v_a, fo as f_fo};

import命令

现在，要在test.js文件中，使用variable.js文件中的变量：

import {a, fo} from './variable.js';
console.log(a);

这里，使用的是import命令，从variable.js文件中，导入a和fo。import直接接受的一个花括号，里面的值要和export导出的相同（也就是上一步中说的名称，这个名称要相同）。
注意：import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。
由于，import命令是在编译阶段就执行的，所以，就算是定义在结尾，它也会被提升到模块的头部。

名称

同样，import也可以使用as关键字来重命名：

import {a as v_a, fo as f_fo} from './variable.js';
......

整体加载

以上介绍的方法，是逐个加载（也就是说，可以选择性的加载），也可以整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面：

import { * as v} from './variable.js';
console.log(v.a);

export default命令

上面在使用import命令的时候，都需要知道export导出的名字是什么。现在介绍一种方法，不用管export的导出命字，就是export的时候，使用default：

function foo() {
  ......
}
export default foo;

然后在导入的时候，就可以自己指定一个名字了：

import customName from './variable.js';

这里customName是自定义名字，而且也不需要用花括号了。
需要说明的是，export default的本质是将后面的值，赋值给default变量，所以：

// 正确
export default 10;
// 报错
export 10;

// 正确
export var a = 1;
// 错误
export default var a = 1;

import和export的复合写法

在一个模块A中，先imoortB，再exprtB，可以这么写：

export { va, vb } from './B.js';

// 可以简单理解为
import { va, vb } from './B.js';
export { va, vb };

同样，复合写法，也支持改名、整体输出、默认接口的写法：

// 接口改名
export { va as v_a, vb as v_b } from './B.js';
// 整体输出
export * from './B.js';
// 默认输出
export { default } from './B.js';

具名接口改为默认接口的写法如下。

export { va as default } from './B.js';

// 等同于
import { va } from './B.js';
export default va;