CommonJS（CJS）模块系统 和 ES Modules（ESM）模块系统区别

让我们来看两个示例，一个使用 CommonJS（CJS）模块系统，另一个使用 ES Modules（ESM）模块系统。我们将创建一个简单的 JavaScript 文件，用于计算两个数的和。

CommonJS 示例：

// commonjs.js

// 导入模块
const add = require('./math');

// 使用模块中的函数
console.log(add(5, 3)); // 输出：8

// math.js

// 定义函数
const add = (a, b) => {
  return a + b;
};

// 导出函数
module.exports = add;

在这个示例中，我们使用 CommonJS 来导入和导出模块。在 commonjs.js 文件中，我们使用 require() 来导入 math.js 文件中导出的模块。而在 math.js 文件中，我们使用 module.exports 来导出 add 函数。

ES Modules 示例：

// esmodules.mjs

// 导入模块
import { add } from './math.mjs';

// 使用模块中的函数
console.log(add(5, 3)); // 输出：8

// math.mjs

// 定义函数
export const add = (a, b) => {
  return a + b;
};

在这个示例中，我们使用 ES Modules 来导入和导出模块。在 esmodules.mjs 文件中，我们使用 import 来导入 math.mjs 文件中导出的模块。而在 math.mjs 文件中，我们使用 export 关键字来导出 add 函数。

这两个示例展示了 CommonJS 和 ES Modules 在语法上的区别。CommonJS 使用 require() 和 module.exports，而 ES Modules 使用 import 和 export。虽然两种模块系统都能完成相同的任务，但它们的语法和用法有所不同。