JavaScript ES6-modules: zo werken import en export

In dit hoofdstuk behandelen we modules en import/export in JavaScript. Je ziet hoe je die tools gebruikt om je code te organiseren en te delen, en hoe je op een veilige manier gegevens tussen verschillende bestanden importeert en exporteert. Aan de hand van concrete, praktische voorbeelden zie je hoe je die mogelijkheden in je eigen code inzet.

Modules en import/export maken deel uit van de ECMAScript 6-specificatie (ES6), ingevoerd in 2015. Alle huidige browsers ondersteunen ze native: een transpiler zoals Babel of een bundler zoals Webpack is alleen nog nodig voor zeer oude browsers, of om bestanden te bundelen.

Wat is een module in JavaScript (ES6)?

Modules zijn een manier om code te structureren en te organiseren door hem op te splitsen in losse, onafhankelijke bestanden. Zo blijft de code op lange termijn begrijpelijk en onderhoudbaar, en worden de verschillende delen ervan leesbaarder en beter herbruikbaar.

Het principe van modules en de voordelen

Het principe van modules berust op de instructie “export”, die bepaalde delen van de code van buiten de module bereikbaar maakt. Zo houd je de delen die de eindgebruiker niet nodig heeft verborgen en exporteer je alleen wat er werkelijk toe doet.

De voordelen van modules zijn talrijk. Om te beginnen voorkom je naamconflicten doordat de verschillende delen van de code van elkaar geïsoleerd zijn. Dat is vooral handig wanneer je met een team aan een groot project werkt. Verder organiseer en structureer je de code beter door hem op te knippen in kleinere bestanden die makkelijker te onderhouden zijn. En tot slot hergebruik je code moeiteloos door hem in andere projecten te importeren.

Een module maken met de instructie “export”

Om in JavaScript een module te maken, zet je de instructie “export” voor de elementen die je van buiten de module bereikbaar wilt maken. Wil je bijvoorbeeld een functie “saluer” exporteren die in een bestand module.js is gedefinieerd, dan schrijf je:

export function saluer() {
  console.log("Bonjour !");
}

Je kunt ook meerdere elementen uit een module exporteren, door de instructie “export” te laten volgen door de elementen die je wilt exporteren. Bijvoorbeeld:

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

Met de instructie “export default” wijs je een standaardelement in je module aan. Dat betekent dat als je niet expliciet een element uit een module importeert, het standaardelement in de plaats wordt geïmporteerd. Bijvoorbeeld:

export default function maFonctionParDefaut() {
  console.log('Je suis la fonction par défaut');
}

Hoe importeer je een module in JavaScript (ES6)?

Met modules splits je je code over verschillende bestanden en organiseer je je project efficiënter. In het vorige hoofdstuk zag je hoe je in JavaScript een module exporteert met de instructie export. Maar hoe importeer je een module in je eigen code? Dat is wat je in deze sectie ziet.

De instructie “import” gebruiken

Om in JavaScript een module te importeren gebruik je de instructie import. Zo ziet dat eruit:

import * as monModule from '/chemin/vers/mon/module';

Met deze syntaxis importeer je alle elementen van de module monModule en zet je ze in een object met dezelfde naam. Je kunt ook aangeven welke elementen van de module je wilt importeren, door de instructie import te laten volgen door de lijst met elementen tussen accolades:

import { maFonction, maVariable } from '/chemin/vers/mon/module';

Benoemde elementen uit een module importeer je ook met de instructie “import” gevolgd door de syntaxis “{ naam1 as alias1, naam2 as alias2 }”, zo:

import { nom1 as alias1, nom2 as alias2 } from 'module';

Een klasse of functie die als export default is geëxporteerd, importeer je zo:

export

export default class MonModule {
  constructor() {
    console.log('Je suis une classe');
  }
}

import MonModule from 'module';

Gebruik je in dezelfde module zowel de standaardimport als een benoemde import, zet dan de standaardimport eerst, zo:

import MonModule, { maFonction } from './monModule';

// de standaardimport gebruiken
const monModule = new MonModule();

// de benoemde import gebruiken
maFonction();

Tot slot bestaat er ook dynamische import, met de methode “import()”, die een module asynchroon laadt. Dat is handig wanneer je een module pas wilt laden op het moment dat je hem echt nodig hebt, zodat je de browser niet onnodig belast.

import('./monModule').then(monModule => {
  // de geïmporteerde elementen gebruiken
  monModule.maFonction();
  monModule.maVariable;
});

Hoe gebruik je modules in de browser?

Je hebt gezien hoe je modules maakt en exporteert met de instructie “export”, en hoe je ze importeert met de instructie “import”. Toch worden die instructies nog niet door alle browsers ondersteund. Om modules toch in een browser te gebruiken bestaan er verschillende oplossingen, die in deze sectie aan bod komen.

Het attribuut “type=module” op de tag “script” gebruiken

Om modules in de browser te gebruiken, moet je het attribuut “type=module” meegeven in de tag “script” van je JavaScript-bestand. Zo weet de browser dat het bestand een module is en anders behandeld moet worden dan een gewoon script. Hier is een voorbeeld:

<script type="module" src="./script.js"></script>

module.js

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

script.js

import { maVariable, maFonction, MaClasse } from './module.js';

console.log(maVariable); // Toont 'ma variable'

Bundlers zoals Webpack gebruiken

Een andere manier om modules in de browser te laden is een bundler. Een bundler is een tool die meerdere modules en JavaScript-bestanden samenvoegt tot één bestand, dat de browser makkelijker laadt. Webpack is een populaire bundler met veel geavanceerde mogelijkheden voor modulebeheer. Wil je met Webpack leren werken, dan heb ik daar een tutorial over geschreven.

Conclusie

Je hebt gezien hoe je een module maakt met de instructie “export” en hoe je een module importeert met de instructie “import”. Ook is langsgekomen hoe je met paden en de omgeving omgaat bij het importeren van modules, en hoe standaardimport en benoemde import/export werken. Tot slot heb je gezien hoe je modules in de browser gebruikt met het attribuut “type=module” op de tag “script”.

Deze tutorial heeft je de basis gegeven om met JavaScript aan de slag te gaan en de kernbegrippen van de taal te begrijpen. Je kunt nu verder leren en je in uiteenlopende richtingen specialiseren, zoals webdevelopment. Veel motivatie bij het verder leren, en succes met je volgende projecten!