esModule

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

export命令

export var firstName = 'Michael';
export var year = 1958;
export function multiply(x, y) {
  return x * y;
};

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
function fn(){}

export {
    firstName as a, 
    lastName, 
    year,
    fn
};

另外，export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

import命令

使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。

import {firstName, lastName as name, year} from './profile';
// 整体加载
import * as obj from './profile';

import命令具有提升效果，会提升到整个模块的头部，首先执行

export default命令

export：

// export.js
export default function foo() {
  console.log('foo');
}
export var name = 'a'
export var age = 1

// 或者写成

function foo() {
  console.log('foo');
}

export default foo;

import：

// 只输入默认方法的变量
import obj from './export.js'
// 同时输入默认方法和其他变量
import obj,{name,age} from './export.js'

因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

// 正确
export var a = 1;

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

// 错误
export default var a = 1;

​export { es6 as default } from './someModule';

// 等同于
import { es6 } from './someModule';
export default es6;

​

模块的继承

//a.js
export var name = 'dd'

//b.js
export var age= '11'

//c.js
export {name as a} from './a,js'
export * from './b,js'

esModule是静态导入

CommonJS是动态导入

esModule输出的是值的引用，而CommonJS模块输出的是值的缓存，不存在动态更新

import()

使用import命令只可以在top level中使用，import()可以在其他作用域去动态的导入，并且导入的是一个promise对象

import('./file').then(data=>{
        console.log(data);
});
// 动态的使用jsonp加载一个新的文件