8.1 CommonJS 与 ES Modules 对比

8.1 CommonJS 与 ES Modules 对比

在 JavaScript 中，模块化是组织代码的重要方式。CommonJS 和 ES Modules 是两种主要的模块系统，分别用于 Node.js 和现代浏览器环境。本节将详细介绍这两种模块系统的特点、语法及其区别。

8.1.1 CommonJS

CommonJS 是 Node.js 默认的模块系统，广泛用于服务器端开发。

1. 导出模块
使用 module.exports 或 exports 导出模块：

// math.js
function add(a, b) {
  return a + b;
}

module.exports = { add };

2. 导入模块
使用 require 导入模块：

// main.js
const math = require("./math");
console.log(math.add(1, 2)); // 输出 3

3. 特点

• 同步加载：模块在运行时同步加载。
• 动态导入：require 可以在代码的任何地方动态调用。
• 适用于服务器端：由于同步加载的特性，CommonJS 更适合服务器端开发。

8.1.2 ES Modules

ES Modules 是 ECMAScript 标准中定义的模块系统，现代浏览器和 Node.js 都支持。

1. 导出模块
使用 export 导出模块：

// math.js
export function add(a, b) {
  return a + b;
}

2. 导入模块
使用 import 导入模块：

// main.js
import { add } from "./math.js";
console.log(add(1, 2)); // 输出 3

3. 特点

• 异步加载：模块在编译时静态分析，异步加载。
• 静态导入：import 必须在模块的顶层使用，不能动态调用。
• 适用于浏览器和现代 Node.js：ES Modules 是现代 JavaScript 的标准模块系统。

8.1.3 CommonJS 与 ES Modules 的对比

8.1.4 互操作性

1. 在 Node.js 中使用 ES Modules
Node.js 从 v12 开始支持 ES Modules，可以通过以下方式启用：

• 使用 .mjs 文件扩展名。
• 在 package.json 中设置 "type": "module"。

2. 在 ES Modules 中使用 CommonJS
ES Modules 可以通过 import 导入 CommonJS 模块，但 CommonJS 模块不能直接使用 import。

示例

// math.cjs (CommonJS)
module.exports = {
  add(a, b) {
    return a + b;
  },
};

// main.mjs (ES Modules)
import math from "./math.cjs";
console.log(math.add(1, 2)); // 输出 3

8.1.5 示例代码

示例 1：CommonJS

// math.js
function add(a, b) {
  return a + b;
}

module.exports = { add };

// main.js
const math = require("./math");
console.log(math.add(1, 2)); // 输出 3

示例 2：ES Modules

// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from "./math.js";
console.log(add(1, 2)); // 输出 3

8.1.6 总结

• CommonJS：适用于 Node.js，同步加载，动态导入。
• ES Modules：适用于现代浏览器和 Node.js，异步加载，静态导入。
• 选择依据：根据开发环境和需求选择合适的模块系统。

通过掌握 CommonJS 和 ES Modules 的区别，你可以更好地组织和管理 JavaScript 代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. CommonJS 和 ES Modules 的主要区别是什么？
2. 在什么情况下应该使用 CommonJS 而不是 ES Modules？
3. 如何在 Node.js 中使用 ES Modules？