ES6 - Модули

В этой статье мы продолжаем знакомится с ES6 и сегодня мы разберем модули.
Javascript не поддерживает модули на уровне языка, поэтому для ES5 были созданы отдельные реализации для модульности. Два самых популярных, но не совместимых стандарта были CommonJS и AMD.

СommonJS был реализован как модульная система NodeJS. Из плюсов
- Лаконичный синтаксис
- Модули загружаются синхронно
- В большинстве случаев используется на сервере

AMD или Asynchronous Module Definition с самой популярной библиотекой RequireJS был предназначен для
- Асинхронной загрузки
- В большинстве случаев использовался на клиенте

Смысл создания модулей в ES6 было создание формата, который был такой же лаконичный как CommonJS и не были такими динамичными. Это дало возможность на этапе компиляции получать ошибки, когда вы пытаетесь импортировать что-то, что не было экспортировано. Также тут поддерживается асинхронная загрузка.
Итак что же такое модуль ES6? Это просто файл с кодом внутри.
Давайте создадим функцию, которая будет складывать 2 числа
Теперь для того, чтобы экспортировать функцию getSum в другие места мы добавляем сложно export
Вот мы и написали первый модуль, который экспортирует функцию getSum.
Теперь давайте в нашем файле testing импортируем ее. Для этого нам поможет деструктуризация и слово import
Здесь мы импортируем функцию getSum из файла math. Дальше можно ее использовать как обычную функцию.
Давайте экспортируем что-то еще из нашего модуля
и теперь мы можем просто добавить в деструктуризацию еще один параметр.
и дальше выводим API_URL, как обычную константу. Таким образом код получает очень лаконичным.
Часто бывает, что имена, которые мы импортируем нам не подходят. например мы хотим получить локальную переменную URL, а не API_URL. Мы можем переопределить название переменной с помощью as
Иногда нам нужно, чтобы модуль экспортировал только одно значение и нам нет смысла использовать деструктуризацию.
Тогда мы можем написать export default
Это экспортирует только одну анонимную функцию. Тогда мы можем ее импортировать без деструктуризации
Еще одним вариантом экспорта, это когда мы хотим экспортировать сразу все что есть в модуле в объект.
У нас есть две функции, которые экспортируются и мы хотим использовать их из одного объекта
Символ звездочка говорит, что мы хотим импортировать все экспорты из модуля и поместить их в переменную math
Итак в этой статье мы разобрали базовую работу с модулями из ES6. Научились применять import и export в различных вариациях.

Если у вас возникли какие-то вопросы, пишите их в наш телеграмм-чат.