Wat zijn ES-modules?

ES-modules zijn de standaardmethode voor het organiseren van code in JavaScript, gebaseerd op de syntax import en export.

Belangrijkste kenmerken:

• Standaard: Deel van de ECMAScript-specificatie, ondersteund door de meeste moderne browsers en runtime-omgevingen zoals Node.js.
• Expliciet afhankelijkheidsbeheer: Modules geven duidelijk aan welke waarden ze exporteren en welke waarden ze importeren uit andere modules.
• Statische structuur: De afhankelijkheden van modules worden bepaald tijdens de compilatiefase (of parsing), niet tijdens runtime. Dit stelt tools voor statische analyse, zoals bundlers (Webpack, Rollup), in staat om de code te optimaliseren.
• Isolatie: Elke variabele, functie of klasse die binnen een module wordt gedeclareerd, is standaard lokaal voor die module. Om extern toegankelijk te zijn, moeten ze expliciet worden geëxporteerd.
• Ondersteuning voor asynchroniciteit: Modules kunnen asynchroon worden geladen in browsers, zonder de pagina te blokkeren.

Syntax:

• Export:

  // app.js
  export const myVariable = 123; // Genummerde export
  export function myFunction() { // Genummerde export
    console.log('Hallo vanaf module!');
  }
  export default class MyClass { // Standaardexport
    constructor() {
      console.log('MyClass-instantie gemaakt');
    }
  }
  

• Import:

  // main.js
  import { myVariable, myFunction } from './app.js'; // Genummerde import
  import MyDefaultClass from './app.js'; // Standaardimport
  
  console.log(myVariable); // 123
  myFunction(); // Hallo vanaf module!
  const instance = new MyDefaultClass(); // MyClass-instantie gemaakt
  

Vergelijking met CommonJS (Node.js):

Kenmerk	ES-modules	CommonJS
Syntax	import, export	require, module.exports, exports
Afhankelijkheden	Statisch (bepaald vóór uitvoering)	Dynamisch (tijdens uitvoering)
Laden	Asynchroon (in browsers)	Synchronous (synchronous)
this in root	undefined	module.exports
Ondersteuning	Browsers, Node.js (standaard vanaf versie 13.2, via de vlag --experimental-modules eerder)	Voornamelijk Node.js

Het gebruik van ES-modules wordt aanbevolen voor moderne frontend-ontwikkeling vanwege hun standaardisatie, betere ondersteuning door tools en de mogelijkheid tot statische analyse.