Экспорт и импорт
Директивы экспорт и импорт имеют несколько вариантов вызова.
В предыдущей главе мы видели простое использование, давайте теперь посмотрим больше примеров.
Экспорт до объявления
Мы можем пометить любое объявление как экспортируемое, разместив 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()
Теперь, если из этой библиотеки в проекте мы используем только одну функцию:
// �� main.js import from './say.js';Импорт «как»
Мы также можем использовать as , чтобы импортировать под другими именами.
Например, для краткости импортируем sayHi в локальную переменную hi , а sayBye импортируем как bye :
// �� main.js import from './say.js'; hi('John'); // Hello, John! bye('John'); // Bye, John!Экспортировать «как»
Аналогичный синтаксис существует и для export .
Давайте экспортируем функции, как hi и bye :
// �� say.js . export ;Теперь hi и bye – официальные имена для внешнего кода, их нужно использовать при импорте:
// �� main.js import * as say from './say.js'; say.hi('John'); // Hello, John! say.bye('John'); // Bye, John!Экспорт по умолчанию
На практике модули встречаются в основном одного из двух типов:
- Модуль, содержащий библиотеку или набор функций, как say.js выше.
- Модуль, который объявляет что-то одно, например модуль 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 class < // у класса нет имени constructor() < . >>export default function(user) < // у функции нет имени alert(`Hello, $!`); >Как экспортировать функцию javascript
При экспорте мы можем указать компонент, который будет экспортироваться по умолчанию с помощью оператора default . Например, определим следующий модуль message.js :
export default function sayHello()
Чтобы сделать экспорт по умолчанию, после оператора export указывается оператор default .
Теперь импортируем эту функцию в модуле main.js :
import sayHello from "./message.js"; sayHello();
Для импорта компонента по умолчанию достаточно после оператора import прописать имя этого компонента.
Совметный экспорт/импорт отдельных компонентов и компонентов по умолчанию
Модуль может одновременно экспортировать отдельные компоненты и компонент по умолчанию:
export let welcome = "Welcome"; export const hello = "Hello"; export default function sayHello() < console.log("Hello METANIT.COM"); >export class Messenger < send(text)< console.log("Sending message:", text); >>
Здесь экспортируются все компоненты, однако только функция sayHello экспортируется по умолчанию. Это определение модуля также эквивалентно следующему определению, где компоненты экспортируются через список:
let welcome = «Welcome»; const hello = «Hello»; function sayHello() < console.log("Hello METANIT.COM"); >class Messenger < send(text)< console.log("Sending message:", text); >> export
При импорте такого модуля, все компоненты, за исключением компонента по умолчанию, необходимо импортировать по отдельности:
import sayHello, from "./message.js"; sayHello(); const telegram = new Messenger(); telegram.send(welcome);
Экспорт и импорт по умолчанию всего модуля
Стоит учитывать, что при экспорте по умолчанию мы можем только один раз использовать оператор default . Мы не можем по отдельности экспортировать по умолчанию сразу два компонента. Однако мы можем экспортировать по умолчанию сразу набор компонентов как единое целое. Например, определим следующий модуль message.js :
let welcome = «Welcome»; const hello = «Hello»; function sayHello() < console.log("Hello METANIT.COM"); >class Messenger < send(text)< console.log("Sending message:", text); >> export default
Теперь импортируем функционал модуля message.js в модуле main.js :
import MessageModule from "./message.js"; MessageModule.sayHello(); const telegram = new MessageModule.Messenger(); telegram.send(MessageModule.welcome);
В данном случае весь экспортированный список компонентов будет сопоставляться с названием MessageModule , которое фактически будет представлять модуль. И далее через этот идентификатор можно обратиться к конкреному компоненту, используя имя компонента: MessageModule.sayHello();
Как экспортировать функцию javascript
Для того, чтобы какие-то компоненты модуля (переменные/константы/функции/классы) модуля можно было подключить и использовать в другом модулей, их надо экспортировать. Мы можем экспортировать какждый компонент по отдельности. Для этого перед определением компонента указывается ключевое слово export . Например, пусть у нас будет следующий модуль message.js
// экспорт переменной export let welcome = "Welcome"; // экспорт константы export const hello = "Hello"; // экспорт функции export function sayHello() < console.log("Hello METANIT.COM"); >// экспорт класса export class Messenger < send(text)< console.log("Sending message:", text); >>
Здесь экспортируются переменная welcome , константа hello , функция sayHello() и класс Messenger . Стоит отметить, что нам необзательно экспортировать все компоненты модуля, какие-то компоненты мы можем не экспортировать и использовать только внутри этого модуля.
В качестве альтернативы мы могли бы экспортировать все компоненты вместе виде списка:
let welcome = «Welcome»; const hello = «Hello»; function sayHello() < console.log("Hello METANIT.COM"); >class Messenger < send(text)< console.log("Sending message:", text); >> export
В данном случае оба способа экспорта будут эквивалентны.
Именной импорт компонентов модуля
Все имортируемые компоненты мы можем подключить по отдельности. Для этого после оператора import в фигурных скобках указываются названия подключаемых компонентов- переменных/констант/функций/функций. Затем после оператора from указывается модуль, из которого идет импорт.
import from "путь_к_модулю";
Например, импортируем в модуле main.js экспортируемые компоненты модуля message.js :
import from "./message.js"; sayHello(); const telegram = new Messenger(); telegram.send(welcome);
Итак, здесь подключаются из модуля message.js переменная welcome , функция sayHello() и класс Messenger . При этом нам необязательно подключать все компоненты модуля. Мы можем подключить только те компоненты, которые нам непосредственно нужны и которые мы собираемся использовать.
В итоге при выполнении страницы в браузере в его консоли мы увидим результат работы компонентов подключенного модуля main.js:
Hello METANIT.COM Sending message: Welcome
Импорт всего модуля
Если в подключаемом модуля очень много компонентов, и мы собираемся использовать все возможности модуля, то перечислять все подключаемые компоненты может быть утомительно. В этом случае мы можем подключить весь функционал модуля в виде:
import * as псевдоним_модуля from "модуль";
После оператора import идет знак звездочки, который указывает, что надо подключить все экспортируемые компоненты. А после оператора as идет псевдоним модуля, с которым будет сопоставляться подключаемый модуль.
Например, подключим в файле main.js весь модуль message.js
import * as MessageModule from "./message.js"; MessageModule.sayHello(); const telegram = new MessageModule.Messenger(); telegram.send(MessageModule.welcome);
В даном случае подключаемый модуль message.js сопоставляется с идентификатором MessageModule . В качестве псевдонима модуля может выстуать произвольное название. И далее мы можем обращаться ко всем экспортируемым компонентам модуля через псевдним модуля, например, обращении к функции sayHello: MessageModule.sayHello()
export
Инструкция export используется для экспорта функций, объектов или примитивов из файла (или модуля).
Примечание: Эта функциональность не реализована в браузерах на данный момент, но она реализована во многих транспайлерах, таких как Traceur Compiler, Babel or Rollup.
Синтаксис
export < name1, name2, …, nameN >; export < variable1 as name1, variable2 as name2, …, nameN >; export let name1, name2, …, nameN; // или var export let name1 = …, name2 = …, …, nameN; // или var, const export default выражение; export default function (…) < … >// или class, function* export default function name1(…) < … >// или class, function* export < name1 as default, … >; export * from …; export < name1, name2, …, nameN >from …; export < import1 as name1, import2 as name2, …, nameN >from …;
Идентификатор для экспорта (чтобы он мог быть импортирован с помощью import в другом файле (скрипте)).
Описание
Существует два типа экспорта, каждый из которых описан ниже:
export myFunction >; // экспорт ранее объявленной функции export const foo = Math.sqrt(2); // экспорт константы
export default function () > // или 'export default class <>' // тут не ставится точка с запятой
Именованная форма более применима для экспорта нескольких величин. Во время импорта, можно будет использовать одно и то же имя, чтобы обратиться к соответствующему экспортируемому значению.
Касательно экспорта по умолчанию (default), он может быть только один для каждого отдельного модуля (файла). Дефолтный экспорт может представлять собой функцию, класс, объект или что-то другое. Это значение следует рассматривать как «основное», так как его будет проще всего импортировать.
Примеры
Использование именованного экспорта
Мы могли бы использовать следующий код в модуле:
// модуль"my-module.js" function cube(x) return x * x * x; > const foo = Math.PI + Math.SQRT2; export cube, foo >;
Таким образом в другом скрипте при помощи импорта (см. import ) мы могли бы получить следующее:
import cube, foo > from "my-module"; console.log(cube(3)); // 27 console.log(foo); // 4.555806215962888
Использование export default
Если мы хотим экспортировать единственное значение или иметь резервное значение (fallback) для данного модуля, мы можем использовать export default .
// модуль"my-module.js" export default function cube(x) return x * x * x; >
Затем, в другом скрипте можно импортировать это значение по умолчанию таким образом:
import cube from "my-module"; console.log(cube(3)); // 27
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-exports |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- import
- ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
- Axel Rauschmayer’s book: «Exploring JS: Modules»
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.