Bei JavaScript-Modulen handelt es sich um Code oder Code-Teile, die aus einem Programm exportiert und in ein anderes Programm importiert werden können. Der Einsatz von Modulen bringt verschiedene Vorteile:

• Debuggen gestaltet sich einfacher
• Codes aus Modulen können an verschiedenen Stellen wiederverwendet werden
• Programm-Teile und Informationen können innerhalb von Modulen “privat” gehalten werden

In JavaScript gibt es verschiedene Möglichkeiten wie man Module exportiert und importiert:

• module.exports und require()
• export und import

module.exports und require()

Eine Möglichkeit für den Import und Export von Modulen stellen module.exports und require() dar. Dabei handelt es sich um eine Node.js-Syntax. Jede JavaScript-Datei, die auf Node läuft, hat ein lokales module-Objekt. Dieses Objekt besitzt wiederum die Eigenschaft “exports”, mit der man definieren kann, was exportiert werden soll. Hier ein Beispiel (gehen wir davon aus die Datei heißt “car.js”):

let Car = {};
Car.specialty = "Strong with 800 horsepower";
 
module.exports = Car;


Zur Erklärung:

• In der ersten Zeile wird ein leeres Objekt erstellt
• Danach wird dem Objekt die Eigenschaft “specialty” mit dem Wert “Strong with 800 horsepower” hinzugefügt
• Die letzte Zeile exportiert nun das Objekt als Modul

So viel zum Export. Wie sieht es nun aus, wenn wir das Modul (aus der Datei “car.js”) in eine andere Datei importieren möchten? Hier kommt require() ins Spiel. require() ist eine Funktion in Node.js, mit derer man Module importieren kann. Wenn wir nun eine neue Datei (z.B. “showcase.js”) haben, dann können wir das Car Modul aus der Datei car.js wie folgt importieren:

const Car = require('./car.js');
 
function showCar() {
  console.log('About my car: ' + Car.specialty);
}
 
showCar();

Zur Erklärung:

• Zunächst importieren wird das Modul mit require() und speichern das in einer Konstante
• Jetzt können wir über diese Konstante auf die Eigenschaften des Moduls aus car.js zugreifen – hier innerhalb der Funktion showCar()

Besonderheiten
Hinsichtlich der Schreibweisen gibt noch weitere Möglichkeiten. Man kann ein Objekt auch direkt mit module.exports exportieren:

module.exports = {
  specialty: "Strong with 800 horsepower",
  getSpecialty: function() {
   return this.specialty;
   }
};

In einer neuen Datei könnte dann auf die Funktion getSpecialty() wie folgt zugegriffen werden:

const Car = require('./car.js');
 
console.log(Car.getSpecialty());

export und import

Während Node.js require() und module.exports unterstützt, bekam JavaScript mit ES6 ebenfalls Techniken zum Export und Import von Modulen. Hier werden 2 Techniken unterschieden:

• default export und import
• named exports und named imports

default export und import

default export funktioniert ähnlich wie module.exports:

let Car = {};
 
export default Car;

Für die Frontend-Entwicklung wird also export default statt module.exports benutzt. Der Import dieses Moduls in eine andere Datei gestaltet sich mit import einfach:

import car from './car';

Man beachte, dass car.js hier auch ohne Dateiendung vermerkt werden kann. Dies geht nur, wenn man mit lokalen Dateien arbeitet.

named exports und named imports

Mit “named exports” kann man mit der Einführung von ES6 Daten mittels Variablen exportieren. Hier die Syntax:

let car = '';
function getColor() {
};
function getHorsepower() {
};
 
export { car, getHorsepower};

Hier sieht man, dass export eine Variable und eine Funktion exportiert. Die Funktion getColor() wird hier nicht mit exportiert. Man kann also ganz konkret bestimmen, was man außerhalb der Datei zur Verfügung stellen möchte. Der Import gestaltet sich ähnlich was die Syntax angeht:

import { car, getHorsepower } from './car';

Auch hier muss die Dateiendung von car.js nicht mitgegeben werden, wenn es sich um eine lokale Datei handelt.

Bei named exports und named imports gibt es noch eine andere Möglichkeit. Deklarierte Variablen und Funktionen lassen sich auch direkt exportieren:

export let car = '';
function getColor() {
};
export function getHorsepower() {
};

Der Import dazu funktioniert wie oben schon beschrieben genau gleich:

import { car, getHorsepower } from './car';

Bei named exports gibt es außerdem die Möglichkeit beim Export der Variablen und Funktionen andere Namen zu vergeben. Das geschieht mit “export as”:

let car = '';
function getColor() {
};
function getHorsepower() {
};
 
export { car as myCar, getHorsepower };

Beim Import muss dann nur die Neubenennung mitgebeben werden:

import { myCar, getHorsepower } from './car';