ES6中的模块化

首先，需要明确的一点是：ES6中的import和export实现的模块化是编译时加载(或称为静态加载)的，即ES6可以在编译时就完成模块的加载，可以在编译时就确定文件的依赖关系，比CommonJS模块的加载方式效率要高，CommonJS是运行时加载，也就是只有在运行时才能确定依赖关系；因为ES6模块时编译时加载，因此，可以做静态分析

其次，ES6中模块默认是使用严格模式的，即使不在文件中添加"use strict"

二、模块的导出

一个文件就是一个模块，模块内的变量无法被外部所访问，如果希望外部环境可以获取某个变量或函数，必须通过export命令导出;

注意：

• export导出的是对外的接口，必须与模块内的变量建立一一对应的关系
• export可以出现在模块文件的任意位置，只要是模块的顶层就可以，不能将export放到块级作用域中

2.1导出的形式：export

// 第一种形式
export var first = 1;

// 第二种形式
var second = 2;
export {second};

/// 第三种形式
var third = 3;
export { 
  third as thirdMethod,
};
// 导出函数
function fn() {}
export { fn }

// 导出函数
export function() {};

错误的形式

// 错误：导出的并不是接口，输出的是1
var first = 1;
export first;

// 错误：导出的是1
export 1;

// 错误：导出的还是一个值，类似于export first
function fn() {}
export fn;

2.2 默认导出: export default
为模块指定默认导出，一个模块中只能有一个export default命令，export default其实就是将后面的接口赋值给default

// 第一种形式
var first = 1;
export default first;   // 不能使用： export default var first = 1;

// 第二种形式
var second = 2;
export {second as default };  // 等同于：export default second;

// 第三种形式
function fn () {}
export default fn;

// 第四种形式
export default function fn() {}

三、模块导入

3.1 导入形式

// 第一种： 从my-module模块中导入foo和say;
import { foo, say } from 'my-module';

// 第二种：导出默认变量名或函数，以及foo和say
import defaultMethod, {foo, say} from 'my_module'

// 第三种：导出后命名
import { foo as myFoo } from 'my-module';

// 第四种：打出所有
import * as myModule from 'my-module';