Mi az az ES-modulok?

Az ES-modulok a JavaScript kód szervezésének szabványos módjai, amelyek a import és export szintaxison alapulnak.

Fő jellemzők:

• Szabvány: Az ECMAScript specifikáció része, amelyet a modern böngészők és futtatókörnyezetek, például a Node.js támogatnak.
• Explicit függőségkezelés: A modulok egyértelműen megjelölik, hogy mely értékeket exportálják és melyeket importálnak más modulokból.
• Statikus szerkezet: A modulok függőségei fordítási (vagy elemzési) szakaszban kerülnek meghatározásra, nem futás közben. Ez lehetővé teszi a statikus elemző eszközök, például a bundlerek (Webpack, Rollup) számára a kód optimalizálását.
• Elszigeteltség: Minden változó, függvény vagy osztály, amelyet egy modulon belül deklarálnak, alapértelmezés szerint helyi az adott modulhoz. Ahhoz, hogy kívülről elérhető legyen, explicit módon exportálni kell.
• Aszinkron támogatás: A modulok aszinkron módon tölthetők be a böngészőkben, anélkül, hogy blokkolnák az oldal betöltését.

Szintaxis:

• Exportálás:

  // app.js
  export const myVariable = 123; // Nevesített export
  export function myFunction() { // Nevesített export
    console.log('Helló a modultól!');
  }
  export default class MyClass { // Alapértelmezett export
    constructor() {
      console.log('MyClass példány létrehozva');
    }
  }
  

• Importálás:

  // main.js
  import { myVariable, myFunction } from './app.js'; // Nevesített import
  import MyDefaultClass from './app.js'; // Alapértelmezett import
  
  console.log(myVariable); // 123
  myFunction(); // Helló a modultól!
  const instance = new MyDefaultClass(); // MyClass példány létrehozva
  

Összehasonlítás a CommonJS-vel (Node.js):

Jellemző	ES-modulok	CommonJS
Szintaxis	import, export	require, module.exports, exports
Függőségek	Statikus (már fordítás előtt meghatározott)	Dinamikus (futás közben meghatározott)
Betöltés	Aszinkron (a böngészőben)	Szinkron
this a gyökérben	undefined	module.exports
Támogatás	Böngészők, Node.js (alapértelmezett a 13.2-es verziótól, a --experimental-modules zászlóval korábban)	Főként Node.js

Az ES-modulok használata a modern frontend fejlesztésben ajánlott megközelítés, mivel szabványosítottak, jobban támogatottak az eszközök által, és lehetővé teszik a statikus elemzést.