Inleiding tot moderne modules in JavaScript

Je hebt al gewerkt met modules via closures. In modern JavaScript zijn er handigere modules verschenen, die het mogelijk maken om elke module in een apart bestand te plaatsen, en deze vervolgens indien nodig te koppelen aan andere bestanden, waarbij alleen de benodigde variabelen en functies worden geëxporteerd.

In eerste instantie waren dergelijke modules niet vastgelegd in de JavaScript-standaard en werden ze simpelweg ontwikkeld door de community. Dientengevolge ontstonden er zeer veel verschillende modulesystemen: AMD, CommonJS, UMD en andere.

Vervolgens verschenen er eigen modules in de JavaScript-standaard. Deze worden ES-modules genoemd. Hierdoor zijn de door de community ontwikkelde modules in rap tempo verouderd en moet je ze niet gebruiken.

Let vooral op CommonJS-modules, omdat NodeJS daar aanvankelijk op werkte, en zelfs nu werkt het er standaard op voor compatibiliteit.

Bovendien zul je vaak in de instructies voor het aansluiten van verschillende bibliotheken de beschrijving van de CommonJS-variant tegenkomen, en niet de ES-variant. Daarom moet je je voorstellen hoe je de CommonJS-code kunt omzetten naar ES.

Er is nog een nuance. Hoewel modules nu zijn vastgelegd in de JavaScript-standaard, zullen ze niet zomaar werken in de browser (voorlopig). Hiervoor moet je een van de populaire bouwtools gebruiken.