CommonJS和ES6 Module
CommonJS是一种模块规范，最初被应用于Nodejs,成为Nodejs的模块规范。运行在浏览器端的javaScript由于也缺少类似的规范，在ES6出来之前，前端也实现了一套相同的模块规范（例如：AMD），用来对前端模块进行管理。
自ES6起，引入了一套新的ES6 Module规范，在语言标准层面实现了模块功能，而且实现得相当简单，有望成为浏览器和服务器通用的模块解决方案。但目前浏览器对ES6 Module兼容还不够友好，我们平时在Webpack中使用export和import，会经过Babel转换为CommonJS规范。
差异
1、语法差异
CommonJS: 使用require语句引入模块，使用module.exports导出模块。
// 引入模块
const moduleA = require('./moduleA');
// 导出模块
module.exports = someFunction;
ES6: 使用import语句引入模块，使用export语句导出模块。
// 引入模块
import moduleA from './moduleA';
// 导出模块
export default someFunction;
2、动态导入
CommonJS: 是同步加载的，无法在运行时根据条件动态加载模块。
// CommonJS 中的同步加载
const moduleA = require('./moduleA');
ES6: 支持动态导入，可以在运行时根据条件异步加载模块。
// ES6 中的动态导入
import('./moduleA').then(moduleA => {
// 处理 moduleA
});
3、静态分析
- CommonJS: 运行时加载，无法在静态阶段进行优化。
- ES6: 可以在静态分析阶段进行优化，提高性能。
4、运行环境
- CommonJS: 适用于服务器端开发和Node.js环境。
- ES6: 是ECMAScript标准的一部分，适用于现代浏览器和一些构建工具（如Webpack、Rollup等）。
5、模块的默认导出
// CommonJS 中导出默认模块
module.exports = someFunction;
// ES6 中导出默认模块
export default someFunction;
6、CommonJs 是动态语法可以写在判断里，ES6 Module 静态语法只能写在顶层
在下面的例子中，require(‘./moduleA’)的执行是在运行时发生的，取决于someCondition的值。
// CommonJS 中的动态引入
if (someCondition) {
const moduleA = require('./moduleA');
// 使用 moduleA
}
相反，ES6模块系统采用静态语法，模块的导入和导出关系在代码解析阶段就已经确定。这就意味着你不能在代码的其他部分（如函数、条件语句内）中使用import语句。import语句必须位于模块的顶层。例如：
// ES6 中的导入，只能写在模块的顶层
import moduleA from './moduleA';
// 这是不允许的，会导致语法错误
// if (someCondition) {
// import moduleA from './moduleA';
// }
7、CommonJs 的 this 是当前模块，ES6 Module的 this 是 undefined
在CommonJS和ES6模块系统中，this的指向确实有一些差异，这涉及到模块中代码执行上下文的不同。
在CommonJS模块中，this指向当前模块的导出对象。也就是说，this在CommonJS模块中是指向模块本身的。
// CommonJS 模块
console.log(this === module.exports); // true
this.someValue = 42;
console.log(module.exports.someValue); // 42
在ES6模块中，this的值是undefined。这是因为ES6模块是在严格模式下执行的，而在严格模式下，全局对象的this值是undefined。、
// ES6 模块
console.log(this === undefined); // true
// 下面的代码会导致错误，因为不能在严格模式下给 undefined 赋值
// this.someValue = 42;