export

Вираз export використовується для створення модулів у Javascript для експортування функцій, об'єктів, або примітивних значень з модуля щоб їх можна було використовувати в інших програмах за допомогою виразу import.

Експортовані модулі знаходяться в strict mode незалежно від того чи ви оголошуєте їх як такі чи ні. Вираз експорт не може бути використаним в вбудованих скріптах (embedded scripts).

Синтакс

Існує три види експортів

  1. Іменовані експорти (Нуль або більше експортів в модулі)
  2. Дефолтний експорт (Один на модуль)
  3. Гібридні експорти
// Експортування індивідуальних властивостей
export let name1, name2, …, nameN; // також var, const
export let name1 = …, name2 = …, …, nameN; // також var, const
export function functionName(){...}
export class ClassName {...}

// Список експортів
export { name1, name2, …, nameN };

// Перейменування експортів
export { variable1 as name1, variable2 as name2, …, nameN };

// Експортування деструктивних значень з перейменуванням
export const { name1, name2: bar } = o;

// Дефолтні експорти
export default expression;
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 …;
export { default } from …;
nameN
Змінна яку потрібно експортувати (щоб імпортувати за допомогою import в іншому скрипті).

Опис

Існує два типи експортів, іменовані і дефолтні. Ви можете мати багато іменованих в модулі, але тільки один дефолтний експорт. Кожен тип має відповідність у синтаксі наведеному вище:

Іменовані експорти:

// експорт функціоналу оголошеного раніше
export { myFunction, myVariable }; 

// експортуємо індивідуальний функціонал (можу бути var, let,
// const, function, class)
export let myVariable = Math.sqrt(2);
export function myFunction() { ... };

Дефолтні експорти:

// експорт функціоналу оголошеного раніше як дефолтний
export { myFunction as default };

// експорт індивідуального функціоналу як дефолтний
export default myFunction() { ... } 
export default class { .. }

Іменоввані експорти є корисними при експортуванні декількох значень. Під час імпорту іменованих експортів обов'язково потрібно використовувати те саме ім'я відповідного об'єкта.

Але дефолтний експорт може бути імпортований з будь яким ім'ям, наприклад:

// файл test.js
let k; export default k = 12;
// якийсь інший файл
import m from './test'; // Візьміть до уваги що ми можемо використовувати import m замість import k, тому що k є дефолтним експортом
console.log(m);        // виведе 12

Ви також можете переіменовувати іменні експорти щоб уникнути конфліктів:

export { myFunction as function1,
         myVariable as variable };

І складати підмодулі докупи в батьківському модулі щоб можна було їх імпортувати з цього модуля.

// В parentModule.js
export { myFunction, myVariable } from 'childModule1.js';
export { myClass } from 'childModule2.js';
// В модулі вищого рівня
import { myFunction, myVariable, myClass } from 'parentModule.js'

Приклад

Використання іменних експортів

В модулі my-module.js, ми можемо написати такий код:

// модуль "my-module.js"
function cube(x) {
  return x * x * x;
}

const foo = Math.PI + Math.SQRT2;

var graph = {
  options: {
      color:'white',
      thickness:'2px'
  },
  draw: function() {
      console.log('From graph draw function');
  }
}

export { cube, foo, graph };

Потім у модулі вищого порядку всередині вашої HTML сторінки ми можемо написати:

import { cube, foo, graph } from './my-module.js';

graph.options = {
    color:'blue',
    thickness:'3px'
};
 
graph.draw();
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

Важливо звернути увагу на наступне:

  • Ви маєте добавити скріпт в ваш HTML за допомогою тега  <script> і типом type="module", якщо хочете щоб він розпізнавався як модуль.
  • Ви не можете виконувати JS модулі за допомогою  file:// URL — ви отримаєте CORS помилки. Ви маєте виконувати модулі церез http сервер.

Використання дефолтного експорта

Якщо ви хочете експортувати одне значення з вашого модулю ви можете використати дефолтний екпорт:

// модуль "my-module.js"

export default function cube(x) {
  return x * x * x;
}

Потім, у дефолтному скрипті імпортувати напряму це значення:

import cube from './my-module.js';
console.log(cube(3)); // 27

Специфікація

Specification Status Comment
ECMAScript Latest Draft (ECMA-262)
The definition of 'Exports' in that specification.
Draft
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Exports' in that specification.
Standard Initial definition.

Підтримка браузерами

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
exportChrome Full support 61Edge Full support 16
Full support 16
Full support 15
Disabled
Disabled From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 47Safari Full support 10.1WebView Android No support NoChrome Android Full support 61Firefox Android Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support 44Safari iOS Full support 10.1Samsung Internet Android No support Nonodejs ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.

Дивіться також