Что такое ES-модули?

ES-модули — это стандартный способ организации кода в JavaScript, основанный на синтаксисе import и export.

Основные особенности:

• Стандарт: Часть спецификации ECMAScript, поддерживаемая большинством современных браузеров и сред выполнения, таких как Node.js.
• Явное управление зависимостями: Модули явно указывают, какие значения они экспортируют и какие значения импортируют из других модулей.
• Статическая структура: Зависимости модулей определяются на этапе компиляции (или парсинга), а не выполнения. Это позволяет инструментам статического анализа, таким как бандлеры (Webpack, Rollup), оптимизировать код.
• Изоляция: Каждая переменная, функция или класс, объявленные внутри модуля, по умолчанию являются локальными для этого модуля. Чтобы быть доступными извне, их необходимо явно экспортировать.
• Поддержка асинхронности: Модули могут загружаться асинхронно в браузерах, не блокируя загрузку страницы.

Синтаксис:

• Экспорт:

  // app.js
  export const myVariable = 123; // Именованный экспорт
  export function myFunction() { // Именованный экспорт
    console.log('Hello from module!');
  }
  export default class MyClass { // Экспорт по умолчанию
    constructor() {
      console.log('MyClass instance created');
    }
  }
  

• Импорт:

  // main.js
  import { myVariable, myFunction } from './app.js'; // Именованный импорт
  import MyDefaultClass from './app.js'; // Импорт по умолчанию
  
  console.log(myVariable); // 123
  myFunction(); // Hello from module!
  const instance = new MyDefaultClass(); // MyClass instance created
  

Сравнение с CommonJS (Node.js):

Использование ES-модулей является рекомендуемым подходом для современной frontend-разработки благодаря их стандартизации, лучшей поддержке инструментами и возможности статического анализа.