Экспорт и импорт компонентов модулей

Именной экспорт компонентов модуля

Для того, чтобы какие-то компоненты модуля (переменные/константы/функции/классы) модуля можно было подключить и использовать в другом модулей, их надо экспортировать. Мы можем экспортировать какждый компонент по отдельности. Для этого перед определением компонента указывается ключевое слово 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()