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 (ECMA-262)
The definition of 'Exports' in that specification.
Living Standard
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 48Safari 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 45Safari iOS Full support 10.3Samsung Internet Android Full support 8.0nodejs Full support 13.2.0
Notes
Full support 13.2.0
Notes
Notes Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Full support 12.0.0
Notes Disabled
Notes Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Disabled From version 12.0.0: this feature is behind the --experimental-modules runtime flag.
Full support 8.5.0
Notes Disabled
Notes Module filenames must end with .mjs, not .js. See Node's ECMAScript Modules documentation for more details.
Disabled From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
default keyword with 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 48Safari 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 45Safari iOS Full support 10.3Samsung Internet Android Full support 8.0nodejs Full support 13.2.0
Notes
Full support 13.2.0
Notes
Notes Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Full support 12.0.0
Notes Disabled
Notes Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Disabled From version 12.0.0: this feature is behind the --experimental-modules runtime flag.
Full support 8.5.0
Notes Disabled
Notes Module filenames must end with .mjs, not .js. See Node's ECMAScript Modules documentation for more details.
Disabled From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
export * as namespaceChrome Full support 72Edge Full support 79Firefox Full support 80IE No support NoOpera Full support 60Safari No support NoWebView Android No support NoChrome Android Full support 72Firefox Android No support NoOpera Android Full support 51Safari iOS No support NoSamsung Internet Android Full support 11.0nodejs Full support 12.0.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

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