CommonJS 和 ES6 Module的区别

CommonJS 和 ES6 Module 是两种不同的 JavaScript 模块规范，它们之间的区别主要体现在以下几个方面：

语法

• CommonJS：使用 require() 函数来引入模块，使用 module.exports 或 exports 来导出模块中的变量、函数等。例如：

// 引入模块
const moduleA = require('./moduleA');
// 导出模块
module.exports = {
    name: 'John',
    age: 30
};

• ES6 Module：使用 import 和 export 关键字来进行模块的导入和导出，语法更加简洁和直观。例如：

// 引入模块
import { name, age } from './moduleA.js';
// 导出模块
export const name = 'John';
export const age = 30;

加载方式

• CommonJS：是一种同步加载模块的方式，在服务器端，模块文件通常是在服务器启动时就被加载和解析，这对于服务器端的应用来说是合适的，因为服务器环境相对稳定，不需要考虑过多的异步加载问题。
• ES6 Module：支持异步加载模块，这在浏览器环境中非常有用，可以避免阻塞页面的渲染。浏览器可以根据需要按需加载模块，提高页面的加载性能。

模块的执行时机

• CommonJS：模块在第一次被加载时执行，并且会缓存执行结果。当再次引入同一个模块时，会直接从缓存中获取结果，而不会再次执行模块代码。
• ES6 Module：模块在被引入时不会立即执行，而是在其被使用时才会执行。并且 ES6 Module 的执行是严格按照模块之间的依赖关系和引入顺序来进行的。

作用域

• CommonJS：每个模块都有自己独立的作用域，模块内定义的变量、函数等默认是私有的，不会污染全局环境。只有通过 module.exports 或 exports 导出的内容才能被其他模块访问。
• ES6 Module：同样具有独立的作用域，模块内的顶级变量和函数默认也是私有的，通过 export 关键字可以将需要暴露的内容导出供其他模块使用。

兼容性

• CommonJS：主要用于 Node.js 环境，在服务器端得到了广泛的应用。但在浏览器环境中，需要使用工具如 Browserify 等进行转换和打包才能使用。
• ES6 Module：是 JavaScript 语言标准的一部分，现代浏览器都已经支持 ES6 Module。但在一些旧版本的浏览器或环境中，可能需要进行兼容性处理或使用转译工具如 Babel 等将 ES6 代码转换为 ES5 代码。