Module

Zwei Ansätze

• JavaScript hatte lange kein Modulkonzept
• Viele Entwickler*innen haben sich Modularisierung selbst gestrickt
• Node.js hat ein eigenes Konzept entwickelt (require)
• ES6 hat dann ein Modulkonzept standardisiert (import, export)

⇒ In freier Wildbahn gibt es zwei bis n Modulkonzepte parallel

Node-Module

• Export von Funktionen über das exports-Objekt
• Import über require

Export: nodemath.js

const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const private = () => 0;
module.exports = { add, sub };

Import

const fs = require('fs'); // NodeJS-Modul
const ma = require('./nodemath.js');
ma.add(2, 2);

ES6-Exports

• export vor der Deklaration einer Funktion oder Konstante
• export am Ende der Datei mit den Funktionen und Konstanten
• export default, wenn nur ein Objekt (Klasset etc.) exportiert wird

Export: es6math.js

const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const private = () => 0;
export { add, sub };

Import

import { add, sub } from './es6math.js';
add(2, 2);

ES6-Imports

• import NAME from RELURL
  importiert den default Export und stellt diesen als NAME zur Verfügung
• import { O1, O2, ... } from RELURL
  importiert die aufgezählten Objekte (Klasse, Konstante etc.) O1, O2, …
• import NAME,{ O1, O2, ... } from RELURL
  importiert den default Export unter NAME und die aufgezählten Objekte (Klasse, Konstante etc.) O1, O2, …
• import * as NAME from RELURL
  importiert alle Objekte (Klasse, Konstante etc.) und macht sie zu Properties des neuen Objektes NAME

• import { O1 as N1, O2 as N2, ... } from RELURL
  importiert die aufgezählten Objekte (Klasse, Konstante etc.) O1, O2, … und stellt sie unter den neuen Namen N1, N2, … zur Verfügung
• import { default as N1, O2 as N2, ... } from RELURL
  importiert den default Export unter dem Namen N1 und die aufgezählten Objekte (Klasse, Konstante etc.) unter den entsprechenden neuen Namen
• import RELURL
  importiert keine Objekte, führt aber den Code im Modul aus

RELURL bezieht sich auf eine URL, die relativ zum importierenden Modul aufgelöst wird

ES6-Module im Web

• ES6-Module werden von modernen Browsern unterstützt
• <script>-Tag muss Zusatz type="module" bekommen
• Üblicherweise wird ein Einstiegsscript geladen, das alle Imports enthält

<script type="module">
  import "./main.js";
</script>