1 files changed, 151 insertions, 0 deletions
diff --git a/files/de/web/javascript/reference/statements/import/index.html b/files/de/web/javascript/reference/statements/import/index.html
new file mode 100644
index 0000000000..07e1b12a7d
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/import/index.html
@@ -0,0 +1,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 =&gt; callback(JSON.parse(data)));
+}
+
+// --main.js--
+import { getUsefulContents } from "file";
+getUsefulContents("http://www.example.com", data =&gt; {
+  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>