Експорт та імпорт

Директиви експорту та імпорту мають декілька варіантів синтаксису.

В попередній статті ми вже бачили спосіб простого використання, тому давайте розглянемо ще декілька прикладів.

Експорт перед оголошенням

Будь-яке оголошення змінної, функції чи класу можна позначати попереду оператором export.

Наприклад, всі наступні експорти валідні:

          // експорт масиву
export let months = ['Січ', 'Лют', 'Бер','Квіт', 'Серп', 'Вер', 'Жов', 'Лист', 'Груд'];

// експорт константи
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// експорт класу
export class User {
  constructor(name) {
    this.name = name;
  }
}
        

Зверніть увагу, export перед класом чи функцією не робить її функціональним виразом. Це все ще оголошення функції (function declaration), хоч і екпортовуваної.

Більшість стилів JavaScript коду не рекомендують ставити крапку з комою після оголошення функції та класу.

Тому не потрібно додавати крапку з комою в кінці export class та export function:

          export function sayHi(user) {
  alert(`Привіт, ${user}!`);
}  // знак ; відсутній вкінці
        

Експорт поза оголошенням

Також export можна використовувати окремо.

В прикладі ми спочатку оголошуємо функцію, а потім експортуємо:

          // 📁 say.js
function sayHi(user) {
  alert(`Привіт, ${user}!`);
}

function sayBye(user) {
  alert(`Бувай, ${user}!`);
}

export {sayHi, sayBye}; // список експортованих змінних
        

…Чи, технічно, ми можемо використати export вище оголошення функції.

Імпорт *

Зазвичай, список того, що потрібно імпортувати розташовують у фігурні дужки import {...}, як у прикладі:

          // 📁 main.js
import {sayHi, sayBye} from './say.js';

sayHi('Іван'); // Привіт, Іван!
sayBye('Іван'); // Бувай, Іван!
        

Якщо потрібно імпортувати дуже багато сутностей, ми можемо імпортувати все, як об’єкт з використанням import * as <obj>, наприклад:

          // 📁 main.js
import * as say from './say.js';

say.sayHi('Іван');
say.sayBye('Іван');
        

З першого погляду, “імпортувати все” виглядає цікавим та зручним у використанні, тоді навіщо нам явно виписувати список того, що потрібно імпортувати?

На це є декілька причин.

Явний список того, що потрібно імпортувати дає коротші імена: