import

Инструкция import используется для импорта ссылок на значения, экспортированные из внешнего модуля. Для работы инструкции нужно прописать у тэга script type="module". 

Синтаксис

import defaultExport from "module-name"; 
import * as name from "module-name"; 
import { export } from "module-name"; 
import { export as alias } from "module-name"; 
import { export1 , export2 } from "module-name"; 
import { export1 , export2 as alias2 , […] } from "module-name"; 
import defaultExport, { export [ , […] ] } from "module-name"; 
import defaultExport, * as name from "module-name"; 
import "module-name";
import("/module-name.js").then(module => {…}) // Динамический импорт

defaultExport

Имя объекта, который будет ссылаться на значение экспорта по умолчанию из модуля.

module-name

Имя модуля для импорта. Это зачастую относительный или абсолютный путь к .js файлу модуля без указания расширения .js. Некоторые сборщики могут разрешать или даже требовать использования расширения; проверяйте своё рабочее окружение. Допускаются только строки с одиночными или двойными кавычками.

name

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

export, exportN

Имена значений, которые будут импортированы.

alias, aliasN

Имя обьекта, который получит импортируемые значения.

Описание

Параметр name это имя локального обьекта, который будет использован как своего рода пространство имен, ссылающееся на импортируемые значения. Параметры export определяют отдельные именованные значения, в то время как import * as name импортирует все значения. Примеры ниже объясняют синтаксис.

Импорт всего содержимого модуля

Этот код вставляет объект myModule в текущую область видимости, содержащую все экспортированные значения из модуля, находящегося в файле /modules/my-module.js.

import * as myModule from '/modules/my-module.js';

В данном случае, доступ к экспортируемым значениям означает использование имени модуля (в данном случае "myModule") в качестве пространства имен. Например, если импортируемый выше модуль включает экспорт метода doAllTheAmazingThings(), вы могли бы вызвать его так:

myModule.doAllTheAmazingThings();

Импорт единичного значения из модуля 

Определенное ранее значение, названное myExport которое было экспортировано из модуля my-module либо неявно (если модуль был экспортирован целиком), либо явно (с использованием инструкции export), позволяет вставить myExport в текущую область видимости.

import {myExport} from '/modules/my-module.js';

Импорт нескольких единичных значений 

Оба значения foo и bar вставлены в текущую область видимости.

import {foo, bar} from '/modules/my-module.js';

Импорт значений с использованием более удобных имен

Можно переименовать импортируемые значения. Например, этот код вставляет shortName в текующую область видимости.

import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';

Переименование нескольких значений в одном импорте

Код импортирует несколько значений из модуля, используя более удобные имена.

import {
  reallyReallyLongModuleExportName as shortName,
  anotherLongModuleName as short
} from '/modules/my-module.js';

Импорт модуля для использования его побочного эффекта

Импорт всего модуля только для использования побочного эффекта от его вызова, не импортируя что-либо. Это запускает глобальный код модуля, но в действительности не импортирует никаких значений.

import '/modules/my-module.js';

Импорт значения по умолчанию

Есть возможность задать значение по умолчанию export (будь то объект, функция, класс или др.). Инструкция import может быть использована для импорта таких значений.

Простейшая версия прямого импорта значения по умолчанию:

import myDefault from '/modules/my-module.js';

Возможно также использование такого синтаксиса с другим вариантом из перечисленных выше (импорт пространства имен или именованный импорт). В таком случае, импорт значения по умолчанию будет определён первым. Для примера:

import myDefault, * as myModule from '/modules/my-module.js';
// myModule использовано как пространство имен

или

import myDefault, {foo, bar} from '/modules/my-module.js';
// именованный импорт конкретных значений

Импорт переменных 

Если вы импортируете переменные то в данной области видимости они ведут себя как константы.

Такой код выведет ошибку:

my-module.js

export let a = 2;
export let b = 3;

main.js

import {a, b} from myModule from '/modules/my-module.js';
a = 5;
b = 6;
// Uncaught TypeError: Assignment to constant variable.

Для импорта можно воспользоваться объектом в котором хранятся эти переменные.

Такой код будет рабочим: 

my-module.js

export let obj = {a:2, b:4};

main.js

import {obj} from '/modules/my-module.js';

obj.a = 1;
obj.b = 4;

Учитывая, что import хранит именно ссылки на значения, экспортированные из внешнего модуля, то это можно использовать как замыкания.

Динамический импорт

Ключевое слово import можно использовать как функцию для динамического импорта модулей. Вызов import() возвращает Promise.

const module = await import('/modules/my-module.js');

Обратите внимание, что несмотря на то, что динамический импорт выглядит как вызов функции он им по сути не является, т.е. не наследует от Function.prototype и, как следствие, его невозможно использовать вместе с методами .call, .apply и .bind

Примеры

Импорт из вспомогательного модуля для помощи в обработке запроса AJAX JSON.

Модуль: file.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
     callback(this.responseText)
  };
  xhr.open('GET', url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

Основной код: main.js

import { getUsefulContents } from '/modules/file.js';

getUsefulContents('http://www.example.com',
    data => { doSomethingUseful(data); });

Динамический импорт

Это пример показывает как использовать динамический импорт который станет частью стандарта  ES2020. В этом примере модуль загружается по клику на ссылку.

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

Совместимость

Смотри также

• export
• Previewing ES6 Modules and more from ES2015, ES2016 and beyond
• ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
• Axel Rauschmayer's book: "Exploring JS: Modules"