ESM-modules: import / export

Wanneer een programma groeit, wordt het lastig om alles in één bestand te bewaren. Moderne JavaScript lost het probleem op met ES-modules (ESM): elk bestand is een module die kan exporteren functies, constanten, klassen en andere bestanden kunnen deze importeren.

export

Je exporteert wat je openbaar wilt maken. Twee vormen:

// somma.js
export function somma(a, b) {
  return a + b;
}

export const PI = 3.14159;

Of, aan het einde van het bestand:

function somma(a, b) {
  return a + b;
}
const PI = 3.14159;
export { somma, PI };

import

Uit een ander bestand:

// app.js
import { somma, PI } from './somma.js';

console.log(somma(1, 2)); // 3
console.log(PI); // 3.14159

Het object { somma, PI } is de lijst met namen die u wilt importeren. Ze moeten overeenkomen met de geëxporteerde namen.

Standaardexport

Elke module kan één "hoofd"-export hebben, zonder naam:

// log.js
export default function log(msg) {
  console.log('[app]', msg);
}

Je importeert het door de naam lokaal te kiezen:

import log from './log.js';
log('ciao');

Hernoemen

import { somma as plus } from './somma.js';
export { somma as add } from './somma.js'; // re-export

Eén "naamruimte" per bestand

Modules zijn geïsoleerd: een variabele die in een bestand wordt gedeclareerd, komt niet in het globale bereik terecht. Jij moet het expliciet exporteren om het elders zichtbaar te maken. Dit is een enorme verbetering ten opzichte van old-school JS waar elke <script> window deelde.

Probeer het

In de onderstaande oefeningen schrijf je niet de echte import/export syntaxis — de sandbox is een enkele bestand. In plaats daarvan zullen we u vragen de code in kleine afzonderlijke functies te organiseren samenwerken, net zoals u zou doen als elk van hen zich in een ander bestand zou bevinden.

Oefening beoordelen