63. CommonJS vs ESM

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

Что такое модульная система?

Представьте, что у вас есть огромная куча LEGO. Модульная система - это способ рассортировать эти LEGO по коробкам, чтобы потом легко найти нужные детали и собрать что-то сложное. В JavaScript модули позволяют разделять код на независимые части, которые можно переиспользовать и комбинировать.

CommonJS

CommonJS - это старая модульная система, изначально разработанная для Node.js (серверный JavaScript). Она использует функции require для импорта модулей и module.exports для их экспорта.

// moduleA.js (экспортирует модуль)
const greeting = "Привет!";

function sayHello(name) {
  return `${greeting} ${name}!`;
}

module.exports = {
  sayHello: sayHello
};

// moduleB.js (импортирует модуль)
const moduleA = require('./moduleA');

console.log(moduleA.sayHello("Мир")); // Выведет: Привет! Мир!

Здесь moduleA.js экспортирует функцию sayHello, а moduleB.js импортирует ее с помощью require. Обратите внимание на ./moduleA - это относительный путь к файлу.

ESM (ECMAScript Modules)

ESM - это более современная модульная система, которая является частью стандарта JavaScript (ECMAScript). Она использует ключевые слова import и export.

// moduleA.js (экспортирует модуль)
const greeting = "Привет!";

export function sayHello(name) {
  return `${greeting} ${name}!`;
}

// moduleB.js (импортирует модуль)
import { sayHello } from './moduleA.js';

console.log(sayHello("Мир")); // Выведет: Привет! Мир!

В этом примере moduleA.js экспортирует функцию sayHello с помощью export, а moduleB.js импортирует ее с помощью import { sayHello } from './moduleA.js'. Важно отметить, что расширение .js в пути к файлу теперь обязательно.

Различия между CommonJS и ESM

• Синтаксис: require/module.exports (CommonJS) vs import/export (ESM).
• Асинхронность: ESM - асинхронный (динамический) импорт, CommonJS - синхронный. Это значит, что ESM может загружать модули по требованию, что может улучшить производительность.
• Поддержка: CommonJS хорошо поддерживается в Node.js, но требует транспиляции (преобразования кода) для использования в браузерах. ESM нативно поддерживается современными браузерами, но требует настройки в Node.js.

Жизненный пример

В реальных проектах вы часто увидите оба подхода.

• Node.js: Многие старые проекты все еще используют CommonJS. Новые проекты, как правило, переходят на ESM.
• React/Vue/Angular: Эти фреймворки активно используют ESM для организации кода. Например, при создании компонентов в React вы почти всегда будете использовать import и export.
• Webpack/Parcel/Rollup: Эти сборщики модулей (bundlers) позволяют использовать и CommonJS, и ESM, преобразуя их в код, понятный браузерам.

Например, в React:

MyComponent.jsx

import React from 'react';

function MyComponent() {
  return (
    <h1>Привет, мир!</h1>
  );
}

export default MyComponent;

Ключевые моменты

• CommonJS и ESM - это две основные системы модулей в JavaScript.
• CommonJS использует require и module.exports.
• ESM использует import и export.
• ESM является более современным и поддерживается нативно в браузерах.
• Сборщики модулей (Webpack, Parcel, Rollup) помогают использовать обе системы.
• Понимание модульных систем критически важно для организации и переиспользования кода.

Интерактивный пример