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

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

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

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

• import
• JavaScript modules guide
• ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
• ES modules: A cartoon deep-dive, Hacks blog post by Lin Clark
• Axel Rauschmayer's book: "Exploring JS: Modules"