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
используется для импорта этих значений в другой модуль. В приведенном выше примере к импортированным значениям можно получить прямой доступ без использования какого-либо дополнительного объекта.
Основные отличия:
- Синтаксис: CommonJS использует
module.exports
иrequire
для экспорта и импорта соответственно, а ESModule использует операторыexport
иimport
. - Поведение при загрузке: модули CommonJS загружаются синхронно, блокируя выполнение до тех пор, пока не будут загружены все зависимости. Модули ESModule загружаются асинхронно, что позволяет остальной части кода продолжать выполнение во время загрузки модулей.
- Поддержка браузера: CommonJS в основном используется в серверных средах, таких как Node.js, тогда как ESModule разработан для браузерного JavaScript и теперь широко поддерживается современными браузерами.
Стоит отметить, что и у CommonJS, и у ESModule есть свои сильные и слабые стороны, и выбор между ними зависит от целевой среды и конкретных требований проекта. В настоящее время во многих проектах используются такие инструменты, как Webpack или Babel, позволяющие использовать синтаксис ESModule, сохраняя при этом обратную совместимость со старыми системами, основанными на CommonJS.
В заключение, CommonJS и ESModule — это две разные модульные системы в JavaScript. В то время как CommonJS является синхронным и в основном используется в серверных средах, ESModule является асинхронным и широко поддерживается в современных браузерах. Понимание различий между этими модульными системами необходимо для написания модульного и поддерживаемого кода JavaScript.
Пожалуйста, следуйте за мной на Medium и подпишитесь на мою рассылку новостей, чтобы получать последние обновления сообщений.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .