Javascript Import Export

Javascript Import und Export

ES6 Module können mittels des import-Schlüsselworts in ein Script oder inline mit <script type="module"> geladen werden.

Javascript nutzt das Schlüsselwort import, um Funktionen und Objekte einzulesen, die von einem anderen Modul exportiert wurden.

Import für kleine Script-Einheiten

Scripte und Programme sind einfacher in den Griff zu kriegen, wenn sie klein und überschaubar bleiben. Diese Weisheit steckte schon in den frühen Tagen der Programmiersprachen hinter der Idee von Funktionen.

Wer von PHP kommt oder mit Server Side Includes vertraut ist, kennt bereits Mechanismen wie require und include.

<script type="module">
import * as THREE from './resources/threejs/r108/build/three.module.js';
 
...
 
</script>
import {OBJLoader2} from './resources/threejs/r108/examples/jsm/loaders/OBJLoader2.js';

Beispiel aus WebGL 3D im HTML-Canvas

Javascript Module importieren u.U. auch selber Module, die sie brauchen. Das erspart das manuelle Laden von Scripten, von denen wiederum das Modul abhängig ist.

Darüber hinaus gibt es einen dynamischen import(), der Funktionen ähnelt, aber keine Scripte mit type="module" erfordert.

Ein dynamischer Import ist sinnvoll, wenn Module unter bestimmten Bedingungen geladen werden sollen. Die statische Form wird bei Abhängigkeiten für das initiale Laden vorgezogen.

import Syntax

Der Parameter name ist der Name des Modul-Objekts und wird zu einer Art Namensraum für Exporte. Der export-Parameter definiert individuelle Exporte, import * as name importiert alle Objekte.

import defaultExport from 'module_name';
import * as name from 'module_name';
import { content } from 'module_name';
import { content as alias } from 'module_name';
import { content1 , content2 } from 'module_name';
import { content1 , content2 } from "module-name/path/to/specific/un-exported/file";
import { content1 , content2 as alias2 , [...] } from 'module_name';
import defaultExport, { content [ , [...] ] } from 'module_name';
import defaultExport, * as name from 'module_name';
import 'module_name';
let content = import('module_name');
export const add = (x, y) => {
    return x + y
}

export const subtract = (x, y) => {
    return x - y;
}
import { add, subtract } from './data';

console.log(add(2, 3));