Инструкция export используется для экспорта функций, объектов или примитивов из файла (или модуля).
Примечание: Эта функциональность не реализована в браузерах на данный момент, но она реализована во многих транспилерах, таких как Traceur Compiler, Babel or Rollup.
Синтаксис
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // или var
export let name1 = …, name2 = …, …, nameN; // или var, const
export default выражение;
export default function (…) { … } // или class, function*
export default function name1(…) { … } // или class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
nameN- Идентификатор для экспорта (чтобы он мог быть импортирован с помощью
importв другом файле (скрипте)).
Описание
Существует два типа экспорта, каждый из которых описан ниже:
- Именованный экспорт:
export { myFunction }; // экспорт ранее объявленной функции export const foo = Math.sqrt(2); // экспорт константы - Дефолтный экспорт (экспорт по умолчанию) (один на скрипт):
export default function() {} // или 'export default class {}' // тут не ставится точка с запятой
Именованная форма более применима для экспорта нескольких величин. Во время импорта, можно будет использовать одно и то же имя, чтобы обратиться к соответствующему экспортируемому значению.
Касательно экспорта по умолчанию (default), он может быть только один для каждого отдельного модуля (файла). Дефолтный экспорт может представлять собой функцию, класс, объект или что-то другое. Это значение следует рассматривать как "основное", так как его будет проще всего импортировать.
Примеры
Использование именованного экспорта
Мы могли бы использовать следующий код в модуле:
// модуль"my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };
Таким образом в другом скрипте при помощи импорта (см. import) мы могли бы получить следующее:
import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888
Использование export default
Если мы хотим экспортировать единственное значение или иметь резервное значение (fallback) для данного модуля, мы можем использовать export default.
// модуль"my-module.js"
export default function cube(x) {
return x * x * x;
}
Затем, в другом скрипте можно импортировать это значение по умолчанию таким образом:
import cube from 'my-module'; console.log(cube(3)); // 27
Спецификации
| Specification | Status | Comment |
|---|---|---|
| ECMAScript 2015 (6th Edition, ECMA-262) Определение 'Exports' в этой спецификации. |
Стандарт | Initial definition. |
| ECMAScript (ECMA-262) Определение 'Exports' в этой спецификации. |
Живой стандарт |
Совместимость с браузерами
| Компьютеры | Мобильные | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
export | Chrome Полная поддержка 61 | Edge
Полная поддержка
16
| Firefox
Полная поддержка
60
| IE Нет поддержки Нет | Opera Полная поддержка 48 | Safari Полная поддержка 10.1 | WebView Android Нет поддержки Нет | Chrome Android Полная поддержка 61 | Firefox Android
Полная поддержка
60
| Opera Android Полная поддержка 45 | Safari iOS Полная поддержка 10.3 | Samsung Internet Android Полная поддержка 8.0 | nodejs
Полная поддержка
13.2.0
|
default keyword with export | Chrome Полная поддержка 61 | Edge
Полная поддержка
16
| Firefox
Полная поддержка
60
| IE Нет поддержки Нет | Opera Полная поддержка 48 | Safari Полная поддержка 10.1 | WebView Android Нет поддержки Нет | Chrome Android Полная поддержка 61 | Firefox Android
Полная поддержка
60
| Opera Android Полная поддержка 45 | Safari iOS Полная поддержка 10.3 | Samsung Internet Android Полная поддержка 8.0 | nodejs
Полная поддержка
13.2.0
|
export * as namespace | Chrome Полная поддержка 72 | Edge Полная поддержка 79 | Firefox Полная поддержка 80 | IE Нет поддержки Нет | Opera Полная поддержка 60 | Safari Нет поддержки Нет | WebView Android Нет поддержки Нет | Chrome Android Полная поддержка 72 | Firefox Android Нет поддержки Нет | Opera Android Полная поддержка 51 | Safari iOS Нет поддержки Нет | Samsung Internet Android Полная поддержка 11.0 | nodejs Полная поддержка 12.0.0 |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
- Смотрите замечания реализации.
- Смотрите замечания реализации.
- Пользователь должен сам включить эту возможность.
- Пользователь должен сам включить эту возможность.
Смотри также
import- ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
- Axel Rauschmayer's book: "Exploring JS: Modules"