Введение в импорт и экспорт ES модулей

По мере того, как проект растет, управление всем вашим кодом может стать сложным.

Скрипты становятся очень большими. Файл нужно скроллить, прыгать из места в место. Скорее всего, вы используете имена для переменных или функций, которые вы уже использовали где-то еще. Всего становится просто… много.

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

Давайте узнаем про это больше!

Как работают ES modules?

Концептуально ES модули работают так:

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

На практике, конечно, есть еще кое-что. Но общая суть в 2 пунктах выше.

Давайте углубимся в мелкие детали.

Создание вспомогательной библиотеки

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

Внутри файла helpers.js у меня есть две функции: одна для сложения двух чисел вместе add(), а другая для их вычитания друг из друга subtract().

var add = function (num1, num2) {
	return num1 + num2;
};

var subtract = function (num1, num2) {
	return num1 - num2;
};

Теперь я хочу хранить все свои вспомогательные функции в одном месте и использовать их где-то еще.

Export в ES модулях

В моем файле helpers.js я могу отмечать функции и переменные, которые можно использовать вне файла, с помощью export.

Один из способов сделать — это добавить export перед выражением переменной или функции.

export var add = function (num1, num2) {
	return num1 + num2;
};

export var subtract = function (num1, num2) {
	return num1 - num2;
};

Однако я предпочитаю добавлять export в конце одной строкой. При таком подходе вы пишете export и объект экспортируемых переменных и функций.

var add = function (num1, num2) {
	return num1 + num2;
};

var subtract = function (num1, num2) {
	return num1 - num2;
};

export {add, subtract};

Я считаю полезным иметь возможность сразу увидеть все экспортированные данные.

Использование import

После того, как вы экспортировали переменные и функции, вы можете импортировать их в другие файлы для использования.

В этом примере у нас есть файл index.js. В нем я хочу запросить у пользователя два числа с помощью prompt(), сложить их вместе и сообщить результат.

// Запросить 2 числа от пользователя
var num1 = parseFloat(prompt('Enter a number', 0));
var num2 = parseFloat(prompt('Enter another number', 0));

// Получить total
var total = add(num1, num2);

// Сообщить результат
alert('The total is ' + total);

Для этого мне нужно получить функцию add() из моего файла helpers.js.

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

Пути к файлам должны начинаться с ведущей точки. Или двух точек, если вы поднимаетесь по дереву каталогов.

import {add} from './modules/helpers.js';

Теперь я могу использовать функцию add() в моем файле index.js.

Импорт нескольких функций

В приведенном выше примере у меня есть доступ к add(), но нет доступа к subtract(), потому что я его не импортировал.

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

import {add, subtract} from './modules/helpers.js';

Теперь я могу использовать функцию subtract().

Импортирование всего сразу

Представьте, что в вашем файле helpers.js было бы много экспортируемых переменных и функций, и вы хотели бы импортировать их все.

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

Вместо использования объекта импортируйте *. Затем с помощью as определите переменную. В нашем случае, давайте использовать подчеркивание _ (обычно так делают для вспомогательных библиотек).

import * as _ from './modules/helpers.js';

Теперь я могу использовать методы add() и subtract(), вызывая их у объекта _.

// Получить total
var total = _.add(num1, num2);

Использование import и export в браузере

Чтобы использовать скрипт, который использует модули ES, вам необходимо сообщить браузеру, что файл является модулем, а не обычным скриптом. Добавьте атрибут type=»module» к вашему тегу <script>.

<script type="module" src="index.js"></script>

Примечание: использование модулей ES изначально в браузере приводит к множеству HTTP-запросов и создает те же проблемы с производительностью, что и свойство CSS @import.

Модули ES также не запустятся, если вы попытаетесь просто открыть HTML-файл в браузере, используя file://. Вам необходимо запустить локальный сервер для локальной разработки.

Вы можете скачать демо всего, что мы видели сегодня, на GitHub.

Совместимость в браузерах

ES модули работают нативно во всех браузерах, кроме IE 🙂

Тем не менее, вы не должны использовать их как есть в продакшене из-за проблем с производительностью, упомянутых выше. Нужно объединять все ваши файлы в один файл, который запускается в браузере.

Вольный перевод статьи.