1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: import
slug: Web/JavaScript/Reference/Statements/import
tags:
- ECMAScript 2015
- JavaScript
- Module
- Statement
translation_of: Web/JavaScript/Reference/Statements/import
---
<div>{{jsSidebar("Statements")}}</div>
<p>Das <strong>import Statement </strong>wird verwendet um Funktionen, Objekte und Primitives zu importieren die von einem externen Modul, einem anderen Script, etc. exportiert wurden.</p>
<p>{{noteStart}}Zur Zeit wird dieses Feature nicht von jedem Browser nativ unterstützt. Viele Transpiler implementieren es, wie beispielsweise der <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a>, <a href="https://github.com/rollup/rollup">Rollup</a> oder <a href="https://webpack.js.org/">Webpack</a>.{{noteEnd}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">import <em>name</em> from "<em>module-name</em>";
import * as <em>name</em> from "<em>module-name</em>";
import { <em>member </em>} from "<em>module-name</em>";
import { <em>member</em> as <em>alias </em>} from "<em>module-name</em>";
import { <em>member1 , member2</em> } from "<em>module-name</em>";
import { <em>member1 , member2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>module-name</em>";
import <em>defaultMember</em>, { <em>member</em> [ , <em>[...]</em> ] } from "<em>module-name</em>";
import <em>defaultMember</em>, * as <em>alias</em> from "<em>module-name</em>";
import <em>defaultMember</em> from "<em>module-name</em>";
import "<em>module-name</em>";</pre>
<dl>
<dt><font face="Courier New, Andale Mono, monospace">name</font></dt>
<dd>Name des Objekts, das die importierten Daten empfängt</dd>
</dl>
<dl>
<dt><code>member, memberN</code></dt>
<dd>Namen der exportierten Member, die importiert werden</dd>
<dt><code>defaultMember</code></dt>
<dd>Name des exportierten Defaults, das importiert wird</dd>
<dt><code>alias, aliasN</code></dt>
<dd>Name des Objekts, das die importierte Property empfängt</dd>
<dt><code>module-name</code></dt>
<dd>Der Name des Moduls, das importiert wird. Also der Dateiname.</dd>
</dl>
<h2 id="Beschreibung">Beschreibung</h2>
<p>Der Parameter <em><code>name</code></em> ist der Name des Objekts, das die exportierten Member empfängt. Die <em><code>member-</code></em>Parameter legen einzelne Einheiten fest, während der <em><code>name</code></em> Parameter alles importiert. <em><code>name</code></em> kann auch eine Funktion sein, wenn das Modul nur eine Einheit hat. Es folgen ein paar Beispiele für die Syntax:</p>
<p>Importieren der gesamten Inhalte des Moduls. Folgendes fügt <code>myModule</code> in den aktuellen Namensraum ein, mit allen exportierten Verbindungen von "my-module" bzw. "my-module.js".</p>
<pre class="brush: js">import * as <em>myModule</em> from "my-module";
</pre>
<p>Einfügen einer einzelnen Einheit eines Moduls. Folgendes fügt <code>myMember</code> in den aktuellen Namensraum ein.</p>
<pre class="brush: js">import {myMember} from "my-module";</pre>
<p>Einfügen von mehreren Einheiten eines Moduls. Folgendes fügt <code>foo</code> und <code>bar</code> in den aktuellen Namensraum ein.</p>
<pre class="brush: js">import {foo, bar} from "my-module";</pre>
<p>Einfügen und Vergeben eines Alias. Folgendes fügt <code>shortName</code> in den aktuellen Namensraum ein.</p>
<pre class="brush: js">import {reallyReallyLongModuleMemberName as shortName} from "my-module";</pre>
<p>Einfügen und Vergeben von mehreren Aliasen</p>
<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">import</span> <span class="punctuation token">{</span>reallyReallyLongModuleMemberName <span class="keyword token">as</span> shortName<span class="punctuation token">,</span> anotherLongModuleName <span class="keyword token">as</span> short<span class="punctuation token">}</span> <span class="keyword token">from</span> <span class="string token">"my-module"</span><span class="punctuation token">;</span></code></pre>
<p>Einfügen eines ganzen Moduls, ohne dessen Namensbindungen zu importieren.</p>
<pre class="brush: js">import 'my-module';</pre>
<h3 id="Defaults_importieren">Defaults importieren</h3>
<p>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-<code>import</code> zu benutzen, um diese Standards zu importieren.</p>
<p>Die einfachste Version importiert die Standards direkt:</p>
<pre class="brush: js">import myModule from "my-module";</pre>
<p>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:</p>
<pre class="brush: js">import myDefault, * as myModule from "my-module";
// myModule wird als namespace benutzt</pre>
<p>oder</p>
<pre class="brush: js">import myDefault, {foo, bar} from "my-module";
// spezifische Imports nach Namen
</pre>
<h2 id="Beispiele">Beispiele</h2>
<p>Importieren einer weiteren Datei um AJAX JSON-Anfragen zu bearbeiten:</p>
<pre class="brush: js; highlight: [14]">// --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);
});</pre>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-imports', 'Imports')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initiale Definition</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{Compat("javascript.statements.import")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{jsxref("Statements/export", "export")}}</li>
<li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Vorschau von Modulen und mehr von ES2015, ES2016 und darüber</a></li>
<li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks Blog Post vonJason Orendorff</li>
<li><a class="external" href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's Buch: "Exploring JS: Modules"</a></li>
</ul>
|
