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
|
---
title: export
slug: Web/JavaScript/Reference/Statements/export
tags:
- ECMAScript6
- JavaScript
- Statement
- export
- Инструкция
- Модули
translation_of: Web/JavaScript/Reference/Statements/export
---
<div>{{jsSidebar("Statements")}}</div>
<p>Инструкция <strong>export </strong>используется для экспорта функций, объектов или примитивов из файла (или модуля).</p>
<div class="note">
<p><strong>Примечание:</strong> Эта функциональность не реализована в браузерах на данный момент, но она реализована во многих транспайлерах, таких как <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a> or <a href="https://github.com/rollup/rollup">Rollup</a>.</p>
</div>
<h2 id="Синтаксис">Синтаксис</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>; // или var
export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // или var, const
export default <em>выражение</em>;
export default function (…) { … } // или class, function*
export default function name1(…) { … } // или 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>Идентификатор для экспорта (чтобы он мог быть импортирован с помощью {{jsxref("Statements/import", "import")}} в другом файле (скрипте)).</dd>
</dl>
<h2 id="Описание">Описание</h2>
<p>Существует два типа экспорта, каждый из которых описан ниже:</p>
<ul>
<li>Именованный экспорт:
<pre class="brush: js">export { myFunction }; // экспорт ранее объявленной функции
export const foo = Math.sqrt(2); // экспорт константы</pre>
</li>
<li>Дефолтный экспорт (экспорт по умолчанию) (один на скрипт):
<pre class="brush: js">export default function() {} // или '<em>export default class {}</em>'
// тут не ставится точка с запятой</pre>
</li>
</ul>
<p>Именованная форма более применима для экспорта нескольких величин. Во время импорта, можно будет использовать одно и то же имя, чтобы обратиться к соответствующему экспортируемому значению.</p>
<p>Касательно экспорта по умолчанию (default), он может быть только один для каждого отдельного модуля (файла). Дефолтный экспорт может представлять собой функцию, класс, объект или что-то другое. Это значение следует рассматривать как "основное", так как его будет проще всего импортировать.</p>
<h2 id="Примеры">Примеры</h2>
<h3 id="Использование_именованного_экспорта">Использование именованного экспорта</h3>
<p>Мы могли бы использовать следующий код в модуле:</p>
<pre class="brush: js">// модуль"my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };
</pre>
<p>Таким образом в другом скрипте при помощи импорта (см. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>) мы могли бы получить следующее:</p>
<pre class="brush: js">import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888</pre>
<h3 id="Использование_export_default">Использование export default</h3>
<p>Если мы хотим экспортировать единственное значение или иметь резервное значение (fallback) для данного модуля, мы можем использовать <code>export default</code>.</p>
<pre class="brush: js">// модуль"my-module.js"
export default function cube(x) {
return x * x * x;
}
</pre>
<p>Затем, в другом скрипте можно импортировать это значение по умолчанию таким образом:</p>
<pre class="brush: js">import cube from 'my-module';
console.log(cube(3)); // 27
</pre>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat}}</p>
<h2 id="Смотрите_также">Смотрите также</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 by Jason Orendorff</li>
<li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
</ul>
|
