CommonJS и ESModule — две популярные модульные системы в JavaScript, которые предлагают разные подходы к организации и совместному использованию кода. В этой статье мы рассмотрим ключевые различия между CommonJS и ESModule и предоставим примеры кода, иллюстрирующие их использование.

CommonJS:

CommonJS была первой модульной системой, представленной в JavaScript, и широко используется в серверных средах, таких как Node.js. Он следует синхронному подходу к загрузке модулей, при котором модули загружаются и выполняются блокирующим образом. Вот пример того, как модули импортируются и экспортируются с помощью CommonJS:

Экспорт модуля:

// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

module.exports = {
  add,
  subtract
};

Импорт модуля:

// app.js
const math = require('./math.js');

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

В CommonJS объект module.exports используется для экспорта значений из модуля, а require используется для импорта этих значений в другой модуль. Доступ к импортированным значениям осуществляется через объект math в приведенном выше примере.

ESМодуль:

ESModule — это модульная система, представленная в ECMAScript 2015 (ES6), и теперь она широко поддерживается современными браузерами. Он следует асинхронному подходу к загрузке модулей, при котором модули загружаются и выполняются неблокирующим образом. Вот пример того, как модули импортируются и экспортируются с помощью ESModule:

Экспорт модуля:

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Импорт модуля:

// app.js
import { add, subtract } from './math.js';

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

В ESModule ключевое слово export используется для явного экспорта значений из модуля, а оператор import используется для импорта этих значений в другой модуль. В приведенном выше примере к импортированным значениям можно получить прямой доступ без использования какого-либо дополнительного объекта.

Основные отличия:

  1. Синтаксис: CommonJS использует module.exports и require для экспорта и импорта соответственно, а ESModule использует операторы export и import.
  2. Поведение при загрузке: модули CommonJS загружаются синхронно, блокируя выполнение до тех пор, пока не будут загружены все зависимости. Модули ESModule загружаются асинхронно, что позволяет остальной части кода продолжать выполнение во время загрузки модулей.
  3. Поддержка браузера: CommonJS в основном используется в серверных средах, таких как Node.js, тогда как ESModule разработан для браузерного JavaScript и теперь широко поддерживается современными браузерами.

Стоит отметить, что и у CommonJS, и у ESModule есть свои сильные и слабые стороны, и выбор между ними зависит от целевой среды и конкретных требований проекта. В настоящее время во многих проектах используются такие инструменты, как Webpack или Babel, позволяющие использовать синтаксис ESModule, сохраняя при этом обратную совместимость со старыми системами, основанными на CommonJS.

В заключение, CommonJS и ESModule — это две разные модульные системы в JavaScript. В то время как CommonJS является синхронным и в основном используется в серверных средах, ESModule является асинхронным и широко поддерживается в современных браузерах. Понимание различий между этими модульными системами необходимо для написания модульного и поддерживаемого кода JavaScript.

Пожалуйста, следуйте за мной на Medium и подпишитесь на мою рассылку новостей, чтобы получать последние обновления сообщений.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .