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
|
---
title: export
slug: Web/JavaScript/Reference/Statements/export
tags:
- ECMAScript 2015
- JavaScript
- Modules
- Statement
- export
translation_of: Web/JavaScript/Reference/Statements/export
---
<div>{{jsSidebar("Statements")}}</div>
<p>Das <strong>export-Statement</strong> wird verwendet, um Funktionen und Objekte aus einer gegebenen Datei (oder <em>Modul</em>) zu exportieren.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // oder: var
export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // oder: var, const
export default <em>expression</em>;
export default function (…) { … } // oder: class, function*
export default function name1(…) { … } // oder: class, function*
export { <var>name1</var> as default, … };
export * from …;
export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …;
export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;</pre>
<dl>
<dt><code>nameN</code></dt>
<dd>Bezeichner der exportiert werden soll (damit er in einem anderen Script via <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> importiert werden kann).</dd>
</dl>
<h2 id="Beschreibung">Beschreibung</h2>
<p>Es gibt zwei verschiedene Arten von Exports, die jeweils der oben angegebene Syntax entsprechen:</p>
<ul>
<li>Benannte Exports:
<pre class="brush: js">export { myFunction }; // exportiert eine Funktion, die zuvor deklariert wurde
export const foo = Math.sqrt(2); // exportiert eine Konstante</pre>
</li>
<li>Default-Exports (nur einer je Script):
<pre class="brush: js">export default function() {} // oder 'export default class {}'
// hier ist kein Semikolon</pre>
</li>
</ul>
<p>Benannte Exports sind nützlich um mehrere Werte zu exportieren. Beim Import kann man den selben Namen verwenden um auf den entsprechenden Wert zu verweisen.</p>
<p>Bezüglich Default-Export: es kann nur einen einzigen Default-Export pro Modul geben. Ein Default-Export kann eine Funktion sein, eine Klasse, ein Objekt oder irgendetwas anderes. Da dieser Wert am einfachsten importiert werden kann wird er als der "Haupt-Export" des Moduls angesehen.</p>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Benannte_Exports">Benannte Exports</h3>
<p>Im Modul können wir den folgenden Code verwenden:</p>
<pre class="brush: js">// Modul "my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };
</pre>
<p>Daraufhin könnten wir nun in einem anderen Script (cf. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>) wie folgt vorgehen:</p>
<pre class="brush: js">import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888</pre>
<h3 id="Standard-Export">Standard-Export</h3>
<p>Wenn wir nur einen einzelnen Wert exportieren wollen, oder einen Fallback-Wert für unser Modul zur Verfügung haben möchten, können wir einen Default-Export verwenden:</p>
<pre class="brush: js">// Modul "my-module.js"
export default function cube(x) {
return x * x * x;
}
</pre>
<p>In einem anderen Script kann dieser Default-Export dann unkompliziert importiert werden:</p>
<pre class="brush: js">import myFunction from 'my-module';
console.log(myFunction(3)); // 27
</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-exports', 'Exports')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initiale Definition.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{Compat("javascript.statements.export")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{jsxref("Statements/import", "import")}}</li>
<li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks Blog-Post von Jason Orendorff</li>
<li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's Buch: "Exploring JS: Modules"</a></li>
</ul>
|
