import

Das import Statement wird verwendet um Funktionen, Objekte und Primitives zu importieren die von einem externen Modul, einem anderen Script, etc. exportiert wurden.

Hinweis: Zur Zeit wird dieses Feature nicht von jedem Browser nativ unterstützt. Viele Transpiler implementieren es, wie beispielsweise der Traceur CompilerBabelRollup oder Webpack.

Syntax

import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";
name
Name des Objekts, das die importierten Daten empfängt
member, memberN
Namen der exportierten Member, die importiert werden
defaultMember
Name des exportierten Defaults, das importiert wird
alias, aliasN
Name des Objekts, das die importierte Property empfängt
module-name
Der Name des Moduls, das importiert wird. Also der Dateiname.

Beschreibung

Der Parameter name ist der Name des Objekts, das die exportierten Member empfängt. Die member-Parameter legen einzelne Einheiten fest, während der name Parameter alles importiert. name kann auch eine Funktion sein, wenn das Modul nur eine Einheit hat. Es folgen ein paar Beispiele für die Syntax:

Importieren der gesamten Inhalte des Moduls. Folgendes fügt myModule in den aktuellen Namensraum ein, mit allen exportierten Verbindungen von "my-module" bzw. "my-module.js".

import * as myModule from "my-module";

Einfügen einer einzelnen Einheit eines Moduls. Folgendes fügt myMember in den aktuellen Namensraum ein.

import {myMember} from "my-module";

Einfügen von mehreren Einheiten eines Moduls. Folgendes fügt foo und bar in den aktuellen Namensraum ein.

import {foo, bar} from "my-module";

Einfügen und Vergeben eines Alias. Folgendes fügt shortName in den aktuellen Namensraum ein.

import {reallyReallyLongModuleMemberName as shortName} from "my-module";

Einfügen und Vergeben von mehreren Aliasen

import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module";

Einfügen eines ganzen Moduls, ohne dessen Namensbindungen zu importieren.

import 'my-module';

Defaults importieren

Ein Standardexport ist möglich (egal, ob es sich um ein Objekt, eine Funktion, eine Klasse oder anderes handelt). Dementsprechend ist es auch möglich einen Standard-import zu benutzen, um diese Standards zu importieren.

Die einfachste Version importiert die Standards direkt:

import myModule from "my-module";

Man kann diese Syntax auch benutzen, um die oben genannten imports durchzufüren. In diesem Fall müssen die Standards aber wie folgt definiert werden:

import myDefault, * as myModule from "my-module";
// myModule wird als namespace benutzt

oder

import myDefault, {foo, bar} from "my-module";
// spezifische Imports nach Namen

Beispiele

Importieren einer weiteren Datei um AJAX JSON-Anfragen zu bearbeiten:

// --file.js--
function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open("GET", url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

// --main.js--
import { getUsefulContents } from "file";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
});

Spezifikationen

Spezifikation Status Kommentar
ECMAScript 2015 (6th Edition, ECMA-262)
Die Definition von 'Imports' in dieser Spezifikation.
Standard Initiale Definition
ECMAScript (ECMA-262)
Die Definition von 'Imports' in dieser Spezifikation.
Lebender Standard  

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung InternetNode.js
importChrome Vollständige Unterstützung 61Edge Vollständige Unterstützung 16
Vollständige Unterstützung 16
Vollständige Unterstützung 15
Deaktiviert
Deaktiviert From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Vollständige Unterstützung 60
Vollständige Unterstützung 60
Keine Unterstützung 54 — 60
Deaktiviert
Deaktiviert From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 48Safari Vollständige Unterstützung 10.1WebView Android Vollständige Unterstützung 61Chrome Android Vollständige Unterstützung 61Firefox Android Vollständige Unterstützung 60
Vollständige Unterstützung 60
Keine Unterstützung 54 — 60
Deaktiviert
Deaktiviert From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 45Safari iOS Vollständige Unterstützung 10.3Samsung Internet Android Vollständige Unterstützung 8.0nodejs Vollständige Unterstützung 13.2.0
Hinweise
Vollständige Unterstützung 13.2.0
Hinweise
Hinweise Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Vollständige Unterstützung 12.0.0
Hinweise Deaktiviert
Hinweise Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Deaktiviert From version 12.0.0: this feature is behind the --experimental-modules runtime flag.
Vollständige Unterstützung 8.5.0
Hinweise Deaktiviert
Hinweise Module filenames must end with .mjs, not .js. See Node's ECMAScript Modules documentation for more details.
Deaktiviert From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
Dynamic importChrome Vollständige Unterstützung 63Edge Vollständige Unterstützung 79Firefox Vollständige Unterstützung 67
Vollständige Unterstützung 67
Keine Unterstützung 66 — 67
Deaktiviert
Deaktiviert From version 66 until version 67 (exclusive): this feature is behind the javascript.options.dynamicImport preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 50Safari Vollständige Unterstützung 11.1WebView Android Vollständige Unterstützung 63Chrome Android Vollständige Unterstützung 63Firefox Android Vollständige Unterstützung 67
Vollständige Unterstützung 67
Keine Unterstützung 66 — 67
Deaktiviert
Deaktiviert From version 66 until version 67 (exclusive): this feature is behind the javascript.options.dynamicImport preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 46Safari iOS Vollständige Unterstützung 11.3Samsung Internet Android Vollständige Unterstützung 8.0nodejs Vollständige Unterstützung 13.2.0
Hinweise
Vollständige Unterstützung 13.2.0
Hinweise
Hinweise Dynamic import can be used in either CommonJS or ES module files, to import either CommonJS or ES module files. See Node's ECMAScript Modules documentation for more details.
Vollständige Unterstützung 12.0.0
Hinweise Deaktiviert
Hinweise Dynamic import can be used in either CommonJS or ES module files, to import either CommonJS or ES module files. See Node's ECMAScript Modules documentation for more details.
Deaktiviert From version 12.0.0: this feature is behind the --experimental-modules runtime flag.
Available in workersChrome Vollständige Unterstützung 80
Vollständige Unterstützung 80
Vollständige Unterstützung 67
Deaktiviert
Deaktiviert From version 67: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Vollständige Unterstützung 80
Vollständige Unterstützung 80
Vollständige Unterstützung 79
Deaktiviert
Deaktiviert From version 79: this feature is behind the Experimental Web Platform Features preference.
Firefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 80Chrome Android Vollständige Unterstützung 80
Vollständige Unterstützung 80
Vollständige Unterstützung 67
Deaktiviert
Deaktiviert From version 67: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Neinnodejs Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.

Siehe auch