Require of import?

require en import zijn allebei technieken die worden gebruikt om externe modules of bestanden in een JavaScript-programma te laden. Hoewel ze vergelijkbare functionaliteit bieden, maken ze deel uit van afzonderlijke module-systemen en zijn er enkele belangrijke verschillen tussen beide.

• Module systemen
  • CommonJS of require
  • ES Modules
    • Gebruik

Module systemen

Er zijn twee module-systemen:

• CommonJS (require)
• ES Modules (ECMAScript Modules) (import)

Het is belangrijk op te merken dat CommonJS nog steeds wijdverspreid wordt gebruikt in Node.js-omgevingen, terwijl ES Modules steeds meer worden gebruikt in moderne browsers en in de nieuwere versies van Node.js.

Samenvatting

• Back-end (Node.js): require of indien node.js >v12 import
• Front-end: import en type='module' bij het inladen van het script.

CommonJS of require

CommonJS is een module-systeem dat oorspronkelijk is ontwikkeld voor gebruik in Node.js en is niet standaard ingebouwd in moderne webbrowsers.

Het maakt gebruik van het require-statement om modules te importeren en het module.exports-object om modules te exporteren.

// Importeren van een module
const express = require('express');

// Exporteren van een module
module.exports = {
  foo: 'bar',
  ...
};
``

Opmerking

Browsers bieden geen ondersteuning aan voor require. Dit wil zeggen dat we dit niet standaard kunnen gebruiken in front-end applicaties. Door gebruik te maken van builders zoals webpack of ESBuild (opens new window) kunnen CommonJS-modules gebundeld worden en omgezet worden naar een formaat dat compatibel is met browsers.

De module-imports en -exports in CommonJS zijn synchroon, wat betekent dat de uitvoering van de code wordt geblokkeerd totdat de vereiste module volledig is geladen.

ES Modules

ES Modules is de officiële module-standaard die is geïntroduceerd in ECMAScript 6 (ES6) (opens new window) en wordt ondersteund in moderne browsers en in de nieuwere versies van Node.js (opens new window) (> v12).

Het maakt gebruik van het import-statement om modules te importeren en het export-statement om modules te exporteren.

// Importeren van een module
import React from "react";
import mijnModule from "./mijnModule.js"; // Volledige module importeren

// Importeren van een specifieke binding uit een module
import { foo, bar } from "./mijnModule.js";

// Exporteren van een specifieke binding module
export const foo = "bar";

De module-imports en -exports in ES Modules zijn asynchroon van aard, wat betekent dat de uitvoering van de code niet wordt geblokkeerd.

Gebruik

Bij het importeren van ES Modules in een browseromgeving is het nodig om het type="module" attribuut toe te voegen aan het scriptelement dat de module laadt.

Dit vertelt de browser dat het script een ES Module is en dat de juiste modulelader moet worden gebruikt.

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

Door type="module" toe te voegen, wordt de inhoud van het scriptbestand behandeld als een ES Module en wordt het ES Modules-systeem gebruikt om de module te laden en de exports te beheren. Dit stelt je in staat om de import- en export-syntax te gebruiken in het scriptbestand.

Opmerking

Bij het gebruik van ES Modules in Node.js is het type=“module” attribuut niet nodig, omdat de ondersteuning voor ES Modules al is ingebouwd in de Node.js-runtime (>v12).

Er zijn verschillende manieren om te exporteren:

mijnModule.js - **Manier 1**

const foo = "Hello";
const bar = "World";

function sayHello() {
  console.log(`${foo} ${bar}`);
}

export { foo, bar, sayHello };

mijnModule.js - **Manier 2**

export const foo = "Hello";
export const bar = "World";

export function sayHello() {
  console.log(`${foo} ${bar}`);
}

Bij het importeren destructure je de geïmporteerde module.

andereModule.js

import { foo, bar, sayHello } from "./mijnModule.js";

console.log(foo); // Output: 'Hello'
console.log(bar); // Output: 'World'

sayHello(); // Output: 'Hello World'

Zie ook

Wat is Tree Shaking (opens new window)