ES6 Модули

Модули JavaScript позволяют разбивать код на отдельные файлы.

Это облегчает обслуживание и сопровождение программного кода.

Модули ES базируются на инструкциях import и export.

Экспорт

Вы можете экспортировать функцию или переменную из любого файла.

Давайте создадим файл с именем person.js и заполним его теми элементами, которые хотим экспортировать.

В ES6-модулях существует две формы экспорта: именованный экспорт и экспорт по умолчанию. Они отличаются способом объявления, синтаксисом и использованием.

Именованный экспорт

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

Особенности именованного экспорта:

• Можно экспортировать произвольное количество сущностей.
• Каждая экспортируемая сущность имеет уникальное имя, которое используется при импорте.
• Имя каждой сущности сохраняется при экспорте и импорте.

Вы можете создать именованные экспорты двумя способами:

// person.js
export const name = "Tobias";
export const age = 18;

// person.js
const name = "Tobias";
const age = 18;

export { name, age };

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

Создадим ещё один файл с именем message.js и воспользуемся им для демонстрации экспорта по умолчанию.

Экспорт по умолчанию позволяет определить одну основную сущность (класс, объект, функцию и т.п.), которая представляет основной API модуля.

Особенности экспорта по умолчанию:

• Каждый модуль может иметь только один экспорт по умолчанию.
• Экспортированная сущность не обязана иметь собственное имя, так как имя задаётся при импорте.
• Удобно для случаев, когда основной функцией модуля является одна главная сущность.

// message.js
const message = () => {
  const name = "Tobias";
  const age = 18;
  return name + ' is ' + age + ' years old.';
};

export default message;

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

Импорт

Вы можете импортировать модули в файл двумя способами, в зависимости от того, являются ли они именованными экспортами или экспортами по умолчанию.

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

import { name, age } from "./person.js";

Важные моменты:

• Чтобы использовать имена при импорте, их нужно указывать явно { имя1, имя2 }.
• Можно переименовать при импорте с помощью конструкции as: import { greet as sayHello } from './module.js'.

import message from "./message.js";

Важные моменты:

• Экспорт по умолчанию доступен под любым именем при импорте.
• Используется простой синтаксис импорта без фигурных скобок: import Имя from 'модуль'.