В чем разница между модулями ES и CommonJS?

Модули ES (ECMAScript) — это стандартный способ работы с модулями в JavaScript, определенный в спецификации ECMAScript 2015 (ES6). Используют синтаксис import и export.

CommonJS — это система модулей, широко используемая в среде Node.js. Использует синтаксис require() и module.exports.

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

1. Синтаксис:

   // ES Modules
   import React from 'react';
   export const myVar = 'hello';
   

   // CommonJS
   const React = require('react');
   module.exports.myVar = 'hello';
   

2. Загрузка:

   • ES Modules: Загружаются асинхронно (хотя синтаксис выглядит синхронно в статическом анализе). Подходит для браузеров и Node.js.
   • CommonJS: Загружаются синхронно. В основном используется в Node.js.

3. Разрешение зависимостей:

   • ES Modules: Статическое разрешение во время компиляции или загрузки. Позволяет выполнять деревьястряхивание (tree-shaking).
   • CommonJS: Динамическое разрешение во время выполнения.

4. Связывание (Binding):

   • ES Modules: Связывание "живое" (live binding). Изменения в экспортируемом значении отражаются в импортирующем модуле.
   • CommonJS: Связывание по значению (copy of value). Изменения в исходном модуле не влияют на импортированный.

5. this в глобальной области видимости:

   • ES Modules: this равно undefined.
   • CommonJS: this равно module.exports.

Таблица сравнения: