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:

  js

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

• main.js:

  js

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

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

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

• my-module.js:

  js

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

• main.js:

  js

  import { obj } from "/modules/my-module.js";obj.a = 1;obj.b = 4;

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

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

import("/modules/my-module.js").then((module) => {  // Делаем что-нибудь с модулем});

Как следствие возврата Promise, с динамическим импортом можно использовать ключевое словоawait

let module = await import("/modules/my-module.js");

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

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

Этот пример показывает, как можно загрузить на страницу дополнительный модуль в зависимости от действий пользователя (в данном случае, по клику на кнопку), а затем использовать функции из загруженного модуля. Промисы - это не единственный способ использовать динамический импорт. Функцияimport() также может использоваться совместно сawait.

const main = document.querySelector("main");for (const link of document.querySelectorAll("nav > a")) {  link.addEventListener("click", (e) => {    e.preventDefault();    import("/modules/my-module.js")      .then((module) => {        module.loadPageInto(main);      })      .catch((err) => {        main.textContent = err.message;      });  });}

• 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"