Javascript import script file

import

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

Существует также function-like динамический import() , который не требует скриптов с типом » module «.

Обратная совместимость может быть обеспечена с помощью атрибута nomodule тега script.

Динамический импорт полезен в ситуациях, когда вы хотите загрузить модуль условно или по требованию. Статическая форма предпочтительна для загрузки начальных зависимостей и может быть более полезна для инструментов статического анализа и tree shaking (en-US) .

Примечание: На данный момент эта функциональность только начинает поддерживаться браузерами. Полноценная реализация присутствует во многих транспайлерах, таких как 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"; import("/module-name.js").then(module => ) // Динамический импорт

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

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

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

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

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

Описание

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

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

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

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

В данном случае, доступ к импортируемым значениям можно осуществить с использованием имени модуля (в данном случае «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'; 

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

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

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

Есть возможность задать дефолтный 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 '/modules/my-module.js'; a = 5; b = 6; // Uncaught TypeError: Assignment to constant variable. 

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

my-module.js

main.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.

Модуль: 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); >); 

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

Этот пример показывает, как можно загрузить на страницу дополнительный модуль в зависимости от действий пользователя (в данном случае, по клику на кнопку), а затем использовать функции из загруженного модуля. Промисы — это не единственный способ использовать динамический импорт. Функция 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; >); >); > 

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

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

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 11 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

Экспорт и импорт

Директивы экспорт и импорт имеют несколько вариантов вызова.

В предыдущей главе мы видели простое использование, давайте теперь посмотрим больше примеров.

Экспорт до объявления

Мы можем пометить любое объявление как экспортируемое, разместив export перед ним, будь то переменная, функция или класс.

Например, все следующие экспорты допустимы:

// экспорт массива export let months = ['Jan', 'Feb', 'Mar', 'Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // экспорт константы export const MODULES_BECAME_STANDARD_YEAR = 2015; // экспорт класса export class User < constructor(name) < this.name = name; >>

Обратите внимание, что export перед классом или функцией не делает их функциональным выражением. Это всё также объявление функции, хотя и экспортируемое.

Большинство руководств по стилю кода в JavaScript не рекомендуют ставить точку с запятой после объявлений функций или классов.

Поэтому в конце export class и export function не нужна точка с запятой:

export function sayHi(user) < alert(`Hello, $!`); > // без ; в конце

Экспорт отдельно от объявления

Также можно написать export отдельно.

Здесь мы сначала объявляем, а затем экспортируем:

// 📁 say.js function sayHi(user) < alert(`Hello, $!`); > function sayBye(user) < alert(`Bye, $!`); > export ; // список экспортируемых переменных

…Или, технически, мы также можем расположить export выше функций.

Импорт *

Обычно мы располагаем список того, что хотим импортировать, в фигурных скобках import <. >, например вот так:

// 📁 main.js import from './say.js'; sayHi('John'); // Hello, John! sayBye('John'); // Bye, John!

Но если импортировать нужно много чего, мы можем импортировать всё сразу в виде объекта, используя import * as . Например:

// 📁 main.js import * as say from './say.js'; say.sayHi('John'); say.sayBye('John');

На первый взгляд «импортировать всё» выглядит очень удобно, не надо писать лишнего, зачем нам вообще может понадобиться явно перечислять список того, что нужно импортировать?

Для этого есть несколько причин.

Современные инструменты сборки (webpack и другие) собирают модули вместе и оптимизируют их, ускоряя загрузку и удаляя неиспользуемый код. Предположим, мы добавили в наш проект стороннюю библиотеку say.js с множеством функций:

// 📁 say.js export function sayHi() < . >export function sayBye() < . >export function becomeSilent()

Импорт «как»

Мы также можем использовать as , чтобы импортировать под другими именами.

Например, для краткости импортируем sayHi в локальную переменную hi , а sayBye импортируем как bye :

// 📁 main.js import from './say.js'; hi('John'); // Hello, John! bye('John'); // Bye, John!

Экспортировать «как»

Аналогичный синтаксис существует и для export .

Давайте экспортируем функции, как hi и bye :

Теперь hi и bye – официальные имена для внешнего кода, их нужно использовать при импорте:

// 📁 main.js import * as say from './say.js'; say.hi('John'); // Hello, John! say.bye('John'); // Bye, John!

Экспорт по умолчанию

На практике модули встречаются в основном одного из двух типов:

1. Модуль, содержащий библиотеку или набор функций, как say.js выше.
2. Модуль, который объявляет что-то одно, например модуль user.js экспортирует только class User .

По большей части, удобнее второй подход, когда каждая «вещь» находится в своём собственном модуле.

Естественно, требуется много файлов, если для всего делать отдельный модуль, но это не проблема. Так даже удобнее: навигация по проекту становится проще, особенно, если у файлов хорошие имена, и они структурированы по папкам.

Модули предоставляют специальный синтаксис export default («экспорт по умолчанию») для второго подхода.

Ставим export default перед тем, что нужно экспортировать:

// 📁 user.js export default class User < // просто добавьте "default" constructor(name) < this.name = name; >>

Заметим, в файле может быть не более одного export default .

…И потом импортируем без фигурных скобок:

// 📁 main.js import User from './user.js'; // не , просто User new User('John');

Импорты без фигурных скобок выглядят красивее. Обычная ошибка начинающих: забывать про фигурные скобки. Запомним: фигурные скобки необходимы в случае именованных экспортов, для export default они не нужны.

Именованный экспорт	Экспорт по умолчанию
export class User	export default class User
import from .	import User from .

Технически в одном модуле может быть как экспорт по умолчанию, так и именованные экспорты, но на практике обычно их не смешивают. То есть, в модуле находятся либо именованные экспорты, либо один экспорт по умолчанию.

Так как в файле может быть максимум один export default , то экспортируемая сущность не обязана иметь имя.

Например, всё это – полностью корректные экспорты по умолчанию:

export default function(user) < // у функции нет имени alert(`Hello, $!`); >

Источник