Common.js 和 ES6 Module 中模块引入的区别

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;

8、CommonJs 是单个值导出，ES6 Module可以导出多个