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

При экспорте мы можем указать компонент, который будет экспортироваться по умолчанию с помощью оператора default. Например, определим следующий модуль message.js:

export default function sayHello() {
  console.log("Hello from sayHello function");
}

Чтобы сделать экспорт по умолчанию, после оператора 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 {welcome, hello, sayHello as default, Messenger}

При импорте такого модуля, все компоненты, за исключением компонента по умолчанию, необходимо импортировать по отдельности:

import sayHello, {welcome, Messenger} 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 {welcome, hello, sayHello, Messenger}

Теперь импортируем функционал модуля message.js в модуле main.js:

import MessageModule from "./message.js";

MessageModule.sayHello();

const telegram = new MessageModule.Messenger();
telegram.send(MessageModule.welcome);

В данном случае весь экспортированный список компонентов будет сопоставляться с названием MessageModule, которое фактически будет представлять модуль. И далее через этот идентификатор можно обратиться к конкреному компоненту, используя имя компонента: MessageModule.sayHello();