JavaScript import — імпорт модулів (ES modules)

Оператор import підключає змінні, функції та класи з інших модулів — це основа модульної системи ES.

правити

Загальний опис

До модулів усе жило в глобальній області: скрипти воювали за імена, порядок підключення був критичним, а знайти, звідки взялась функція, було квестом.

import робить залежності явними. Дивишся на початок файлу — і одразу бачиш, що йому потрібно і звідки.

Імпорт статичний: він піднімається на початок і виконується до решти коду. Якщо ж модуль треба завантажити за умовою, є динамічна форма import() — вона повертає проміс і працює будь-де.

правити

Порада

Динамічний import() — головний інструмент розбиття бандла: важкий модуль завантажиться лише тоді, коли справді знадобиться.

автор: NagarD правити

Нотатка

Щоб import працював у браузері, скрипт має підключатися як <script type="module">. У звичайному скрипті це синтаксична помилка.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

import defaultExport from 'module';
import { name1, name2 } from 'module';
import * as ns from 'module';

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
import	61+	60+	10.1+	48+	16+	-

Підтримка: мобільні переглядачі

Переглядач
import	61+	yes	yes	10.3+

Приклади

+ запропонувати свій приклад у пісочниці

// модуль можна вантажити навіть із data:-адреси — зручно для демо
import { PI, add } from 'data:text/javascript,export const PI = 3.14159; export const add = (a, b) => a + b;';

console.log(PI);        // 3.14159
console.log(add(2, 3)); // 5

// динамічний імпорт — лише коли справді знадобиться
const module = await import('data:text/javascript,export const hi = "Привіт";');
console.log(module.hi);