#6 ES6 - модули

В этом уроке мы продолжаем знакомится с ес6 и сегодня мы разберем модули.

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

СommonJS был реализован как модульная система NodeJS. Из плюсов

1. Лаконичный синтаксис
2. Модули загружаются синхронно
3. В большинстве случаев используется на сервере

AMD или Asynchronous Module Definition с самой популярной библиотекой RequireJS был предназначен для

1. Асинхронной загрузки
2. В большинстве случаев использовался на клиенте

Смысл создания модулей в Ecmascript 6 было создание формата, который был такой же лаконичный как CommonJS и не были такими динамичными. Это дало возможность на этапе компиляции получать ошибки, когда вы пытаетесь импортировать что-то, что не было експортировано. Также тут поддерживается асинхронная загрузка.

Итак что же такое модуль ес6? Это просто файл с кодом внутри.

Давайте создадим функцию, которая будет складывать 2 числа

const addTwo = (a, b) => a + b;

Теперь для того, чтобы экспортировать функцию addTwo в другие места мы добавляем сложно export

export const addTwo = (a, b) => a + b;

Вот мы и написали первый модуль, который експортирует функцию addTwo.

Теперь давайте в нашем файле testing импортируем ее. Для этого нам поможет деструктуризация и слово import

import { addTwo } from './math';
console.log(addTwo(1, 2));

Здесь мы импортируем функцию addTwo из файла math. Дальше можно ее использовать как обычную функцию.

Давайте експортируем что-то еще из нашего модуля

export const API_URL = 'http://google.com';

и теперь мы можем просто добавить в деструктуризацию еще один параметр.

import { addTwo, API_URL } from './math';
console.log(addTwo(1, 2), API_URL);

и дальше выводим API_URL, как обычную константу. Таким образом код получает очень лаконичным.

Часто бывает, что имена, которые мы импортируем нам не подходят. например мы хотим получить локальную переменную URL, а не API_URL. Мы можем переопределить название переменной с помощью as

import { addTwo, API_URL as URL } from './math';
console.log(addTwo(1, 2), URL);

Иногда нам нужно, чтобы модуль еспортировал только одно значение и нам нет смысла использовать деструктуризацию.

Тогда мы можем написать export default

export default (a, b) => a + b;

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

import addTwo from './math';
console.log(addTwo(1, 2));

Еще одним вариантом експорта, это когда мы хотим експортировать сразу все что есть в модуле в обьект.

export const addTwo = (a, b) => a + b;
export const multiplyTwo = (a,b) => a * b;

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

import * as math from './math';
console.log(math.addTwo(1, 2), math.multiplyTwo(1, 2));

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

Итак в этом уроке мы разобрали базовую работу с модулями из es6. Научились применять import и export в различных вариациях.

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