Webpack工程化笔记(六)：ES6 Module与Commo

CommonJS与ES6 Module最本质的区别在于前者对模块依赖的解决是“动态”的，而后者是“静态”的，这里动态的含义是指模块依赖关系的建立发生在代码运作阶段，而静态则是指的依赖关系的建立发生在代码的编译阶段。
比如CommonJS:

// getInfo.js
module.exports = {
  name:'getInfo'
}

// index.js
const name = require('./getInfo.js').name;

在CommonJS中，模块A加载模块B时，会执行B模块的代码，并将其导出的对象作为require函数的返回值进行返回，并且require的模块路径可以动态的指定，支持传入一个表达式，也或者可以通过if语句等去判断加载哪个模块，因此，在模块执行前，我们无法明确模块关系，这也就是说模块的导入、导出发生在代码的运作阶段。
而ES6 Module：

// getInfo.js
export const name = 'getInfo';

// index.js
import { name } from './getInfo';

ES6 Module中导入、导出都是声明式的，不支持导入的路径是一个表达式，并且导入、导出语句必须位于模块的顶层作用域，因此，ES6 Module是一种静态的模块结构，在ES6代码的编译阶段就可以分析出模块的依赖关系。