ESModules

ESModules (ang. ECMAScript modules) – natywny system modułowy wprowadzony w specyfikacji ECMAScript 6 (ES‑2015). Umożliwia podział kodu JavaScript na odrębne, wymienialne jednostki, które można importować i exportować zarówno w przeglądarkach internetowych, jak i w środowisku Node.js.

Historia

Przed wprowadzeniem ESModules programiści JavaScript korzystali głównie z rozwiązań własnych lub bibliotek, takich jak CommonJS czy AMD. W 2015 roku, wraz z publikacją ECMAScript 2015, po raz pierwszy zdefiniowano oficjalny standard modułowy, który w kolejnych latach został zaimplementowany w większości nowoczesnych przeglądarek internetowych oraz w Node.js (od wersji 12).

Podstawowa składnia

Moduły definiuje się w osobnych plikach z rozszerzeniem .mjs lub .js (przy odpowiedniej konfiguracji). Najważniejsze elementy składni to:

• export – udostępnia zmienne, funkcje lub klasy innym modułom.

  // utils.js
  export function sum(a, b) {
      return a + b;
  }
  export const PI = 3.1415;

• export default – definiuje domyślny eksport modułu.

  // logger.js
  export default function log(message) {
      console.log(message);
  }

• import – wczytuje eksporty z innego modułu.

  // main.mjs
  import { sum, PI } from './utils.js';
  import log from './logger.js';
  
  log(`Suma: ${sum(2, 3)}, PI: ${PI}`);

Ładowanie modułów w przeglądarce

Aby użyć ESModules w przeglądarce, element <script> musi posiadać atrybut type="module". Przeglądarka automatycznie traktuje taki skrypt jako moduł i obsługuje importy asynchronicznie.

<script type="module">
import { init } from './app.js';
init();
</script>

Dzięki temu możliwe jest stosowanie lazy loading oraz wykorzystanie URL jako identyfikatorów modułów.

Kompatybilność i polyfill

Większość nowoczesnych przeglądarek (Chrome, Firefox, Safari, Edge) obsługuje ESModules od wersji 2017‑2018. W starszych środowiskach programiści często sięgają po narzędzia transpilacyjne, takie jak Babel lub TypeScript, które zamieniają kod modułowy na format CommonJS lub UMD.

Zastosowania

ESModules stały się standardem w projektach frontendowych i backendowych. Najczęstsze zastosowania obejmują:

• Budowanie skalowalnych aplikacji SPA (Single‑Page Applications) przy użyciu frameworków React, Angular czy Vue.js.
• Modularyzacja kodu w Node.js – od wersji 13 dostępny tryb module w package.json.
• Tworzenie bibliotek udostępnianych w ekosystemie npm, które mogą być importowane zarówno w przeglądarce, jak i w Node.js.
• Dynamiczny import (import()) umożliwiający ładowanie kodu na żądanie, co wpływa na wydajność aplikacji.

Różnice względem CommonJS

Cecha	ESModules	CommonJS
Tryb ładowania	Asynchroniczny (dynamiczny)	Sychroniczny
Wynik importu	Stały, „żywy” (live bindings)	Kopia wartości w momencie require()
Składnia	Standardowa import / export	require / module.exports
Obsługa w przeglądarce	Wbudowana od ES‑2015	Wymaga bundlera (np. Webpack)

Przyszłość i rozwój

Specyfikacja ESModules jest stale rozwijana w ramach kolejnych edycji ECMAScript. Najnowsze propozycje obejmują:

• Wsparcie dla top‑level await (ES2022).
• Rozszerzenia importu warunkowego i importu z URL‑ów (import maps).
• Lepszą integrację z WebAssembly.

Powiązane pojęcia

Więcej informacji można znaleźć w następujących artykułach:

• ECMAScript
• JavaScript
• Node.js
• CommonJS
• Babel
• TypeScript
• Webpack
• Przeglądarka internetowa

Bibliografia

1. ECMA‑262, ECMAScript Language Specification, 6th edition (2015).
2. MDN Web Docs – sekcja Modules (dostęp wewnętrzny).
3. Node.js Documentation – ES Modules (wersja LTS).