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

Внимание: На данный момент эта функциональность только начинает поддерживаться браузерами. Полноценная реализация присутствует во многих транспайлерах, таких как TypeScript и Babel, а также в сборщиках, например, в Rollup и Webpack.

Синтаксис

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";
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';
// именованный импорт конкретных значений

Примеры

Импорт из вспомогательного модуля для помощи в обработке запроса 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); });

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

Спецификация Статус Комменарий
ECMAScript 2015 (6th Edition, ECMA-262)
Определение 'Imports' в этой спецификации.
Стандарт Начальное определение.
ECMAScript Latest Draft (ECMA-262)
Определение 'Imports' в этой спецификации.
Черновик  

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

Update compatibility data on GitHub
КомпьютерыМобильныеServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung InternetNode.js
Базовая поддержкаChrome Полная поддержка 61Edge Полная поддержка 16
Полная поддержка 16
Полная поддержка 15
Отключено
Отключено From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Полная поддержка 60
Полная поддержка 60
Нет поддержки 54 — 60
Отключено
Отключено From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 47Safari Полная поддержка 10.1WebView Android Нет поддержки НетChrome Android Полная поддержка 61Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 60
Полная поддержка 60
Нет поддержки 54 — 60
Отключено
Отключено From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 47Safari iOS Полная поддержка 10.1Samsung Internet Android Нет поддержки Нетnodejs Полная поддержка 8.5.0
Замечания Отключено
Полная поддержка 8.5.0
Замечания Отключено
Замечания files must have suffix .mjs, not .js
Отключено From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
Dynamic importChrome Полная поддержка 63Edge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See development status.
Firefox Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 1342012.
IE Нет поддержки НетOpera Полная поддержка 50Safari Полная поддержка 11.1WebView Android Полная поддержка 63Chrome Android Полная поддержка 63Edge Mobile Нет поддержки НетFirefox Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 1342012.
Opera Android Полная поддержка 50Safari iOS Полная поддержка 11.1Samsung Internet Android ? nodejs ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

 

Смотри также

Метки документа и участники

Внесли вклад в эту страницу: Ingverd, papadima, torbasow, bad4iz, nikolaifedorov, maxmind, standy, vvalgis, Enclave88, kurzgame
Обновлялась последний раз: Ingverd,