Inleiding

ESM staat voor “Ecma Script Modules” en biedt developers de mogelijkheid om code te importeren en exporteren vanuit andere bestanden, een feature die absoluut wordt aangeraden bij het aanbrengen van structuur binnen je codebase. Gebruik van modules moet echter wel worden geactiveerd.

<script>

Als je bij een script wilt opgeven dat het om een module gaat, dan kan je dat op de onderstaande manier doen: je geeft bij het aanmaken van het script binnen de HTML op dat het om een type=module gaat. Vervolgens kan je het bestand een extensie .mjs geven in plaats van .js.

<script type="module" src="myjsfile.mjs"></script>

package.json

Gebruik je een package.json om alle dependencies en/of devDependencies mee op te geven, dan kan je ook in dit bestand opgeven dat de ESM-module-aanpak wordt gebruikt. Je doet dat door in het bestand “type”: “module”, toe te voegen.

import en export

ESM is gemaakt om structuur te kunnen geven binnen je applicatie. Het biedt developers de mogelijkheid om code (variabelen, functies, classes, et cetera) vanuit het ene bestand bloot te stellen aan het andere bestand. Dat is erg handig, want op die manier kan je goed reguleren welke code herbruikt mag worden en/of toegang heeft en welke code niet. Het geeft je meer “control”.

Variables

Bekijk het onderstaande voorbeeld. Hier zie je twee bestanden: constants.mjs en main.mjs. In constants.mjs wordt een verzameling van constante waarden bijgehouden die iets over de applicatie vertellen, maar eigenlijk nooit van waarde veranderen. Het zou netjes zijn om die in een apart bestand te hebben staan.

export const WIDTH  = 256;
export const HEIGHT = 231;

export const BLACK  = '#000000';
export const GREY   = '#999999';
export const WHITE  = '#ffffff';

Doordat het woord export voor de const staat, is de variabele klaargemaakt om ergens anders in de applicatie geimporteerd te worden. Sterker nog: als je in een ander bestand de naam van de variabele typt (bijvoorbeeld WIDTH), dan zou de intellisense automatisch een import moeten toevoegen bovenaan het bestand. Hieronder doen we dat handmatig, dat kan natuurlijk ook.

import { WIDTH } from './constants.mjs';

console.log(WIDTH);

Functions

Gaat het om een functie? Dan gaat het op dezelfde manier. Zet het woord export voor de functie en de poort is “open gezet” om in andere bestanden toegang te krijgen tot deze functie met een import. In het onderstaande bestand helpers.mjs laat ik zien dat een “classic-function” en een “arrow-function” een export krijgen en zodoende kunnen worden gebruikt in main.mjs.

import { WIDTH, HEIGHT } from './constants.mjs';

export function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

export const withinBounds = (x, y) => {
  return x >= 0 && y >= 0 && x < WIDTH && y < HEIGHT ? true : false;
}