Including libraries with ES6 Modules

ES6-Module werden auch JavaScript Module genannt. Mit Modulen können wir Code mit dem import-Keyword importieren und mit dem export-Keyword exportieren.

ES6-Module sind der moderne Weg, Code zu einem Projekt hinzuzufügen. Der Support ist exzellent. Wir sollten daher immer ES6-Module verwenden und keine <script>-Tags.

Importing basics

Das Haupt-JavaScript-File muss ein type-Attribut mit dem Wert module haben:

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

Bibliotheken können mit dem import-Keyword importiert werden. Dateien, die auf diese Weise importiert werden, werden modules genannt.

import './path-to-imported-file.js';

Pfade zu Modulen müssen relativ zum aktuellen Pfad sein. Wenn library.js und main.js im gleichen Ordner liegen, können wir die Bibliothek so importieren:

import './library.js';

Das import-Keyword muss vor dem anderen Code kommen:

import './libary.js';
import './another-file.js';
import './yet-another-file.js';

// Other code here

Importierte Files werden ausgeführt, sobald auf sie zugegriffen wird:

library.js

console.log('library');

main.js

import './libary.js';
console.log('main');

// Console:
library
main

Module haben nicht den gleichen global scope wie das Haupt-JavaScript-File. Variablen innerhalb eines Moduls können vom JavaScript-File aus nicht erreicht werden:

library.js

const hello = 'Hello World!';

main.js

import './library.js';
console.log(hello); // ERROR

// Console:
Uncaugt ReferenceError: hello is not defined at main.js:3

Named Exports

Wir können Variable mit dem export-Keyword exportieren. Auf diese Weise exportierte Variable nennen wir named exports.

library.js

export const hello = 'Hello World!';

Named exports können wir importieren, indem wir sie in geschwungenen Klammern im import-Statement inkludieren. Also sozusagen wie wenn wir Variable aus einem Objekt destrukturieren:

main.js

import { hello } from './library.js';
console.log(hello);

// Console:
Hello World!

Wir können beliebig viele named exports exportieren:

library.js

export const one = 'one';
export const tow = 'two';

main.js

import { one, two} from './library.js';
console.log(one);
console.log(two);

// Console:
one
two

Wir können das export-Keyword auch am Ende der Datei verwenden. Wenn wir das so machen, exportieren wir ein JavaScript-Objekt das alle named exports enthält:

library.js

const one = 'one';
const two = 'two';

export { one, two };

Importing many named exports

Wir können alle benannten Exporte mit dem *-Keyword importieren. Wenn wir * benutzen, müssen wir auch ein as-Keyword verwenden, um ein Objekt zu erstellen, das alle named exports enthält:

import * as library from './library.js';
console.log(library.one);
console.log(library.two);

Mit dem as-Keyword können wir named exports auch umbenennen. Das ist aber nicht ratsam, es ist viel einfacher verständlich, wenn jeder die gleichen Variablennamen verwendet.

// Possible, but not recommended:
import { one as five, two } from './library.js';
console.log(five);
console.log(two);

Default Export

Wir können eine Variable auch mit dem default-Keyword exportieren. Diese Variable wird default export genannt.

library.js

export default 'Default export';

// Doesn't work
export default const 'Default export';

Man kann den default export importieren, indem man der Variable einen Namen gibt:

import whateverYouWant from './library.js';
console.log(whateverYouWant);

// Console:
Default export;

Allerdings: genauso wie es bad practice ist, named exports umzubenennen, ist es bad practice, default exports umzubenennen. Der beste Weg, um default exports nachzuverfolgen, ist es, den Namen der Bibliothek zu benutzen. Wenn diese keinen Namen hat, kann man den Dateinamen verwenden.

import library from './library.js';

Man kann named und default exports zugleich importieren, allerdings ist das unübersichtlich und nicht empfehlenswert:

import library, { one, two } from './library.js';
console.log(library);
console.log(one);
console.log(two);

// Console:
Default export
one
two

The mjs extension

Manchmal wird eine mjs-Datei für ES6-Module verwendet. mjs sagt Node (und somit Bundler wie Webpack), dass ES6 und kein CommonJS verwendet wird. Wenn man keinen Bundler für Frontend Code verwendet, braucht man das nicht. mjs-Dateien können Kopfweh verursachen, auch wenn man einen Bundler verwendet. (Zuviel für diesen Kurs!)

Building libraries with ES6 Modules

Automatic libraries

Für Automatische Bibliotheken können wir ganz normalen Code innerhalb eines JavaScript Module Files schreiben. Wir müssen nichts mit blocks oder IIFE verkapseln.

library.js

// code normally
const hello = 'Hello World!';

Manual libraries

Für Manuelle Bibliotheken müssen wir Funktionen, die von anderen benutzt werden sollen, exportieren:

library.js

export function hello() {
  console.log('Hello World!');
}

ES6 Modules use JavaScript Objects

ES6 Module benutzen JavaScript Objekte unter der Haube. Wir können Eigenschaften, die von Modulen exportiert werden, wie jedes andere JavaScript-Objekt benutzen.