JavaScript 模块在组织代码、增强可重用性和提高应用程序的可维护性方面发挥着至关重要的作用。广泛使用的两个主要模块系统是 CommonJS (CJS) 和 ECMAScript Modules (ESM)。了解它们的差异和能力是在项目中有效利用它们的关键。

CommonJS (CJS)

CommonJS 是最初为 Node.js 环境设计的模块系统。它强调模块的简单性和同步加载。

CommonJS 导出/导入模块

CommonJS 中的模块使用 module.exports 导出值、对象或函数。

1.默认导出/导入

// logger.js
function log(message) {
    console.log(message);
}

module.exports = log; // Default export

// index.js
const log = require('./logger');

log('This is a log message.'); // Output: This is a log message.

2.指定导出/导入

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

function subtract(a, b) {
    return a - b;
}

module.exports = { add, subtract }; // Named exports

// index.js
const { add, subtract } = require('./math');

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

ECMAScript 模块 (ESM)

ESM，在 ES6 (ES2015) 中引入，是 JavaScript 的标准化模块系统。它支持同步和异步模块加载，并且在现代浏览器和具有某些配置的 Node.js 中原生支持。

ECMAScript 导出模块

ESM 使用导出语句导出值、对象或函数。

1.默认导出/导入

// utils.mjs (Note the .mjs extension for ESM)
function formatName(name) {
    return `Mr./Ms. ${name}`;
}

export default formatName;

// index.mjs
import formatName from './utils.mjs';

console.log(formatName('John')); // Output: Mr./Ms. John

2.命名导出

// operations.mjs
export function multiply(a, b) {
    return a * b;
}

export function divide(a, b) {
    return a / b;
}

// index.mjs
import { multiply, divide } from './operations.mjs';

console.log(multiply(4, 2)); // Output: 8
console.log(divide(10, 2)); // Output: 5

3. ECMAScript 模块中的混合导出样式

// mixedExports.mjs
function greet(name) {
    return `Hello, ${name}!`;
}

export default greet;

export function goodbye(name) {
    return `Goodbye, ${name}!`;
}

// index.mjs
import sayHello, { goodbye } from './mixedExports.mjs';

console.log(sayHello('Alice')); // Output: Hello, Alice!
console.log(goodbye('Bob')); // Output: Goodbye, Bob!

CommonJS 和 ESM 之间的主要区别

• 语法：CommonJS使用require()和module.exports，而ESM使用导入和导出语句。
• 加载：CommonJS模块是同步加载的，而ESM支持同步和异步加载。
• 环境：CommonJS主要用于Node.js，而ESM在浏览器中原生支持，并且可以通过特定配置（--experimental-modules标志或.mjs文件扩展名）在Node.js中使用。

兼容性和使用

• Node.js：CommonJS 由于其在 Node.js 环境中的长期支持和简单性而仍然流行。
• 浏览器：ESM 越来越受欢迎，因为浏览器越来越多地支持它，提供更好的性能和模块化代码加载。

结论

在 CommonJS 和 ECMAScript 模块之间进行选择取决于您的项目环境和要求。虽然 CommonJS 对于 Node.js 后端开发来说非常强大，但 ESM 提供了跨浏览器和现代 Node.js 应用程序的互操作性。了解这些模块系统使开发人员能够有效地利用 JavaScript 的模块化功能。

通过利用 CommonJS 或 ESM，开发人员可以增强代码组织、提高项目可扩展性并促进 JavaScript 项目中的协作。