ES6模块化和CommonJS的区别

• CommonJS主要用于服务器端node环境，不适用于浏览器端。
• 因为require是一个运行时的同步操作，对于服务器来说是一个本地读取文件的操作，等待时间很短。但对于浏览器来说就成了网络文件请求，等待的时间会很长。因此CommonJS不适用于浏览器端。

正确
if(true){
  require('./a.js'); 
}

• ES6模块化是尽可能的静态化，在编译阶段即知晓了依赖关系，在运行前会先把有依赖关系的文件全部下载好以后才开始执行。
• ES6运行过程中，改变了模块中的值，会同步到import的文件中。

报错
if(true){
  import a from './a.js'; 
}

• ES6 module导出的是一个接口，CommonJS导出的是一个js对象

错误：由于不是对象不能使用es6的解构语法
import { a: b } from './a.js'; 
正确：
var { a: b } = require(./a.js);

ES6模块化

ES6模块化用法

• 浏览器支持ES6 module，不支持CommonJS
• 使用<script type="module">
• 将网页部署到服务器，本地无法直接运行
• es6 module为'use strict'模式

export

• 导出的相当于是一个接口，类似一个对象，必须有key值的存在
• 但使用export default不需要有key值，default关键字就相当于是key值

export var a = 1; 
等价于
var a = 1;
export { a }

错误用法：
export 1;  // 相当于没有key值
var a = 1;
export a;
export [];

正确用法：
export {};
export { a: 1 };
export default 1;

export {} 的用法

export { a: 1, b: 2 } // test.js
// 相当于export a 

import { a } from 'test.js'

export {} 和 export default {} 的区别

？？export {} 相当于是一个接口，把每个单独的export进行了汇总 import时需要使用 {} 进行导入
export default {} 导出的是一个对象，import时不可以直接使用{} 进行解构 import不支持解构