1、Es6与commonJS区别

1、编译时加载 VS 运行时加载

2、动态绑定 VS 缓存

3、import异步加载 VS require同步加载

ES6在代码编译阶段就会生成，导出的是一个只读的引用，在脚本执行时根据这个引用去模块中去取值。所以它的值是动态可变的，因为值是从模块中引入进来，而模块的内容是允许改变的。

commonJS的module.exports导出的是一个对象，在脚本完全运行后生成，导入的是值的拷贝。所以模块内部的变化无法影响。

所以只可以通过require的方式引入动态路径的资源，而import不可以，可以使用import()异步加载的模块对象在then的参数中。

注意：

1、export不可处于块级作用域（会报错）

因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。

2、实现运行时加载的方法(异步)

import('./ww.js')

3、export 与 import 的复合写法

export { foo, bar } from 'my_module';

// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };

2、ES6具体使用

1、export错误用法：必须保证对外的接口与模块内部的变量建立一一对应关系

1. export 1

2. let m = 1

    export  m

3. function f() {}

    export f;

2、export正确写法


1. export var m = 1;

2. var m = 1;

    export {m};

3. var n = 1;

   export {n as m};

3、import

import命令接受一对大括号，里面指定要从其他模块导入的变量名

import {m} from "path";

1、export default命令用于指定模块的默认输出

只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

export default function () {}
import m from 'path'

2、输入的变量重命名 as

3、模块整体加载 *

import * as echarts from 'echarts'