Можешь объяснить ключевые различия между CommonJS и ES Modules, включая их синтаксис, модели выполнения и их применение в Node.js и браузерных окружениях?

Обзор

CommonJS (CJS) и ES Modules (ESM) — это две основные системы модулей в JavaScript, каждая со своими отличительными особенностями и сценариями использования.

Синтаксис

• CommonJS использует require() и module.exports
• ES Modules использует операторы import и export

Модель выполнения

• CommonJS загружает модули синхронно во время выполнения, то есть зависимости разрешаются в момент исполнения кода
• ES Modules загружаются асинхронно и разбираются статически до выполнения, что позволяет движку заранее проанализировать дерево зависимостей

Ключевые преимущества ES Modules

• Tree shaking — бандлеры могут удалять неиспользуемый код, потому что импорты поддаются статическому анализу
• Лучшая производительность в браузерах благодаря асинхронной загрузке
• Встроенная поддержка во всех современных браузерах

Сценарии использования

• CommonJS по-прежнему широко используется в legacy-проектах на Node.js и пакетах, созданных до появления поддержки ESM
• ES Modules — это современный стандарт, предпочтительный как для браузерных проектов, так и для новых проектов на Node.js

Использование обеих систем в Node.js

Node.js поддерживает обе системы модулей. Чтобы включить ESM, используй:

• Расширение файла .mjs
• "type": "module" в своём package.json

Примечание: CJS и ESM нельзя свободно смешивать — совместимость требует аккуратной настройки, так как require() не может напрямую импортировать ESM-файлы.