Модули ECMAScript

Модули ECMAScript (ESM) — это спецификация для использования модулей в веб-среде. Она поддерживается всеми современными браузерами и является рекомендуемым способом написания модульного кода для веб-приложений.

Webpack поддерживает обработку модулей ECMAScript для их оптимизации.

Экспорт

Ключевое слово export позволяет экспортировать элементы из ESM в другие модули:

export const CONSTANT = 42;

export let variable = 42;
// only reading is exposed
// it's not possible to modify the variable from outside

export function fun() {
  console.log('fun');
}

export class C extends Super {
  method() {
    console.log('method');
  }
}

let a, b, other;
export { a, b, other as c };

export default 1 + 2 + 3 + more();

Импорт

Ключевое слово import позволяет получать ссылки на элементы из других модулей в ESM:

import { CONSTANT, variable } from './module.js';
// import "bindings" to exports from another module
// these bindings are live. The values are not copied,
// instead accessing "variable" will get the current value
// in the imported module

import * as module from './module.js';
module.fun();
// import the "namespace object" which contains all exports

import theDefaultValue from './module.js';
// shortcut to import the "default" export

Пометка модулей как ESM

По умолчанию webpack автоматически определяет, является ли файл ESM или другим типом модуля.

Node.js предоставляет способ явного задания типа модуля файлов, используя свойство в package.json. Установка "type": "module" в файле package.json принудительно указывает, что все файлы в этом пакете являются модулями ECMAScript. Установка "type": "commonjs" вместо этого принудительно сделает их модулями CommonJS.

{
  "type": "module"
}

Кроме того, файлы могут задать тип модуля, используя расширение .mjs или .cjs. .mjs указывает на ESM, а .cjs — на CommonJs.

В DataURI использование MIME-типов text/javascript или application/javascript также принудительно установит тип модуля на ESM.

Помимо формата модулей, пометка их как ESM также влияет на логику разрешения, логику взаимодействия и доступные символы в модулях.

Импорты в ESM разрешаются более строго. Относительные запросы должны включать имя файла и расширение (например, *.js или *.mjs), если поведение не отключено с помощью fullySpecified=false.

Из не-ESM модулей можно импортировать только «по умолчанию» экспорт. Именные экспорты недоступны.

Синтаксис CommonJs недоступен: require, module, exports, __filename, __dirname.