ES Module与CommonJS的区别

Commonjs

1. 每个文件就是一个模块，有自己的作用域，在一个文件里面定义的变量，函数，类都是私有的，对其他文件不可见
2. 在模块中使用global定义全局变量，不需要导出，在别的文件中可以访问到
3. 每个模块内部，module变量代表当前模块。这个变量时一个对象，它的exports属性(module.exports)是对外的接口
4. 通过require加载模块，读取并执行一个js文件，然后返回该模块的exports对象
5. 所有代码都运行在模块作用域，不会污染全局作用域
6. 模块可以多次加载，但只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就读取缓存结果，要想让模块再次运行，必须清除缓存
7. 模块加载的顺序，按照其在代码中出现的顺序

ES6 Module

ES6在语言标准的层面上，实现了模块功能，旨在成为浏览器和服务器通用的模块解决方案。其功能模块主要由export 和import export 命令用于规定模块的对外接口，import 命令用于输入其他模块的功能

var basicNum = 0;
var add = function(a, b) {
  return a + b
}

export { add, basicNum }

import { add, basicNum } from './math';
function test(ele) {
  ele.textContent = add(99 + basicNum)
}

es6还提供了export default命令，为模块指定默认输出，对应的import语句不需要使用大括号。也更趋近于AMD的写法

• 严格模式：es6的模块自动采用严格模式
• import read-only特性: import属性是只读的，不能赋值，类似于const的特性
• Export/import提升: import/export必须位于模块顶级，不能位于作用域内
• export/import会提升到模块顶部，是在编译阶段完成的

ES6 Module和Commonjs的区别

• commonjs模块输出的是值的拷贝(一旦输出一个值，模块内部的变化就影响不到这个值), ES6模块输出的是值的引用

• commonjs是模块运行时加载(动态)，es6模块是编译时输出接口(静态)

• commonjs模块的require() 是同步加载模块，ES6模块的import命令是异步加载，有一个独立的模块依赖的解析阶段

• commonjs加载的是一个对象(module.exports属性)，该对象只有在脚本运行完才生成。而ES6模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。