CommonJS 和 ES Modules 的 区别

admin

https://blog.csdn.net/kuailebeihun_/article/details/144163192


1. CommonJS 和 ES Modules 区别?

CommonJS 和 ES Modules 是 JavaScript 中最常用的两种模块系统，它们在语法、加载机制和用途上有一些关键的区别。了解这些差异对于开发现代 JavaScript 应用程序非常重要。

1.1 语法差异CommonJS：

• 使用 require() 来导入模块。
• 使用 module.exports 或 exports 来导出模块。
  

1. // 导入模块
   
2. const express = require('express');
   
3. 
   
4. // 导出模块
   
5. module.exports = someFunction;

复制代码

ES Modules：

• 使用 import 和 export 语法。
• 支持导入和导出多个值，以及导入整个模块。
  

1. // 导入模块
   
2. import express from 'express';
   
3. 
   
4. // 导出模块
   
5. export default someFunction;
   
6. // 或导出多个命名导出
   
7. export { someFunction, anotherFunction };

复制代码

1.2. 加载机制CommonJS：

• 同步加载模块，这意味着模块在被 require() 调用时立即加载和执行。
• 适用于服务器端，因为模块文件通常在本地磁盘上，可快速访问。
  

ES Modules：

• 支持异步加载，使其更适合用于浏览器端，可以实现动态的导入。
• 静态结构，可以在编译时进行分析，这有助于进行“树摇”（tree-shaking）以移除未使用的代码。
  

1. // 动态导入示例
   
2. import('some-module').then((module) => {
   
3.   // 使用模块
   
4. });

复制代码

1.3. 运行时行为CommonJS：

• 每个模块在第一次被加载时执行，然后其导出的结果被缓存，后续的 require() 调用将返回同一份实例，即模块的单例。
• 这种缓存机制有助于避免模块的重复执行。
  

ES Modules：

• 导入的绑定是实时的，即导入的是一个活的连接，如果模块内部的值变了，导入它的模块也会得到更新的值。
• 这种行为更类似于引用而非复制，使得模块间的交互更加动态。
  

1.4. 兼容性和使用场景CommonJS：

• 主要用于 Node.js。
• 在 Node.js 中，CommonJS 是默认的模块系统，直到最近 Node.js 开始支持 ES Modules。
  

ES Modules：

• 旨在成为 JavaScript 的官方模块系统。
• 在现代浏览器中得到原生支持，并且现在 Node.js 也支持 ES Modules，但需要特定的配置（如 type: “module” 在 package.json 中）或使用 .mjs 扩展名。