Для того, чтобы какие-то компоненты модуля (переменные/константы/функции/классы) модуля можно было подключить и использовать в другом модулей, их надо экспортировать. Мы можем экспортировать какждый компонент по отдельности. Для этого перед определением компонента указывается ключевое слово 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 {welcome, hello, sayHello, Messenger}
В данном случае оба способа экспорта будут эквивалентны.
Все имортируемые компоненты мы можем подключить по отдельности. Для этого после оператора import в фигурных скобках указываются названия подключаемых компонентов- переменных/констант/функций/функций. Затем после оператора from указывается модуль, из которого идет импорт.
import {компонент1, компонент2, ... компонентN} from "путь_к_модулю";
Например, импортируем в модуле main.js экспортируемые компоненты модуля message.js:
import {sayHello, welcome, Messenger} 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()