Модули JavaScript играют решающую роль в организации кода, повышении возможности повторного использования и улучшении удобства сопровождения приложений. Широко используются две основные модульные системы: CommonJS (CJS) и ECMAScript Modules (ESM). Понимание их различий и возможностей является ключом к эффективному использованию их в ваших проектах.

CommonJS (CJS)

CommonJS — это система модулей, изначально разработанная для сред Node.js. Он подчеркивает простоту и синхронную загрузку модулей.

Модули экспорта/импорта CommonJS

Модули в CommonJS используют модуль.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() и модуль.exports, тогда как ESM использует операторы импорта и экспорта.
• Загрузка: модули CommonJS загружаются синхронно, а ESM поддерживает как синхронную, так и асинхронную загрузку.
• Среда: CommonJS в основном используется в Node.js, тогда как ESM изначально поддерживается в браузерах и может использоваться в Node.js с определенными конфигурациями (флаг --experimental-modules или расширение файла .mjs).

Совместимость и использование

• Node.js: CommonJS по-прежнему широко распространен благодаря его давней поддержке и простоте в средах Node.js.
• Браузеры: ESM набирает популярность, поскольку браузеры все чаще поддерживают его изначально, предлагая более высокую производительность и модульную загрузку кода.

Заключение

Выбор между модулями CommonJS и ECMAScript зависит от среды и требований вашего проекта. Хотя CommonJS является надежным средством разработки серверной части Node.js, ESM обеспечивает совместимость между браузерами и современными приложениями Node.js. Понимание этих систем модулей позволяет разработчикам эффективно использовать модульные возможности JavaScript.

Используя CommonJS или ESM, разработчики могут улучшить организацию кода, улучшить масштабируемость проекта и облегчить совместную работу над проектами JavaScript.