import

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

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. Dies ist ein Dateiname.

Beschreibung

Der name Parameter 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 dass Modul nur eine Einheit hat. Es folgen ein paar Beispiele für die Syntax:

Importieren der gesamten Inhalte des Moduls. Dies fügt myModule mit gegebener Reichweite mit allen exportierten Verbindungen ein.

import * as myModule from "my-module.js";

Einfügen einer einzelnen Einheit eines Moduls. Dies fügt myMember mit gegebener Reichweite ein.

import {myMember} from "my-module.js";

Einfügen von mehreren Einheiten eines Moduls. Dies fügt foo und bar mit gegebener Reichweite ein.

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

Einfügen und Vergeben eines Alias. Dies fügt shortName mit gegebener Reichweite ein.

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

fügt ein ganzes Modul ein, wessen Variablen und Funktionen nicht aufgerufen werden können.

import "my-module.js";

Defaults importieren

Ein Standartexport ist möglich (egal, ob es sich um ein Objekt, eine Funktion, a Klasse oder anderes handelt). Dementsprechend ist es auch möglich einen Standartimport zu benutzen um diese Standarts zu importieren.

Die einfachste Version importiert die Standarts direkt:

import myModule from "my-module.js";

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

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

oder

import myDefault, {foo, bar} from "my-module.js";
// 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.js";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
});

Spezifikation

Browser Kompatibilität

[1] Partial support is behind a command line flag: --harmony-modules. See this V8 bug.

[2] Siehe auch diesen Firefox bug.

Siehe auch

• export
• ES6 in Depth: Modules, Hacks Blog Post vonJason Orendorff
• Axel Rauschmayer's book: "Exploring JS: Modules"