Всем привет!
Сегодня разберём одну из самых частых тем, которую разработчики скипают при изучении, а потом на собесах хлопают глазками, когда их спрашивают:

“В чём же разница между CommonJS и ES Modules?”

Самое обидное — ведь мы сталкиваемся с этим каждый день на практике когда пишем код, но часто относимся по принципу “работает — и ладно, потом разберусь…”

⸻

Погнали! Первый пост: Модули в JavaScript

На первый взгляд может показаться: ну что тут сложного?
Все знают про npm, установку пакетов, зависимости… Но давайте копнём глубже — в историю.

⸻

1995 — появился JavaScript

1997 — он был стандартизирован как ECMAScript

До 2009 года разработчики писали JS только для браузеров, подключая скрипты через <script> и надеясь, что всё загрузится в нужном порядке.
Чтобы не загадить глобальный scope, изобретались всякие костыли:
IIFE (immediately invoked function expressions), namespace-объекты и прочее веселье.

Поддерживать такой код было больно. Структуры как таковой не было.

⸻

2009 — появляется CommonJS (первое имя — ServerJS)

В это время встает логичный вопрос:

Как подключать модули? Как делиться кодом между файлами? Как изолировать зависимости?

На сцену выходит CommonJS с его:
• require() — для импорта
• module.exports — для экспорта

(Я же говорила, что все просто, по-любому видели такой синтаксис, но просто не знали возможно что это CommonJS 😂)

И тут же появляется Node.js, который становится успешной реализацией CommonJS.

⸻

2010 — выходит npm, и CommonJS становится стандартом де-факто.

⸻

Но не всё было идеально.
require() — это обычная функция, которая может принимать не только строку, и невозможно заранее определить зависимости, не исполнив код.
А то, что экспортируется через module.exports, недоступно в локальной области — неудобно!

⸻

2015 — JavaScript получает собственную систему модулей:

ES Modules

Теперь у нас есть:
• import и export (это уж точно юзаем ежедневно)
• Импорт происходит до выполнения кода — это ускоряет разработку и упрощает сборку.

⸻

Как вам такой исторический экскурс?
Стало ли понятнее, откуда ноги растут у import и require?
Пишите в комментариях — интересно узнать, было ли что-то новое для вас!

P.S. По мне понимание базовых знаний — это фундамент, без которого новые технологии превращаются в хаос, а рост в профессии становится невозможным.