Введение в JavaScript модули. Часть 1

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

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

Выгоды:

1. Код можно разделить на более мелкие файлы с собственной автономной функциональностью.
2. Одни и те же модули могут использоваться в любых других приложениях.
3. В идеале, модули никогда не должны проверяться другими разработчиками, потому что они доказали свою эффективность.
4. Код, ссылающийся на модуль, понимает, что это зависимость. Если файл модуля будет изменен или перемещен, проблема сразу становится очевидной.
5. Модуль кода, как правило, помогает исключить конфликты имен. Функция x() в модуле module1 не может пересекаться с функцией x() в модуле module2, так как эти функции находятся в разных пространствах имен, поэтому вызовы этих функций принимают вид module1.x() и module2.x().

Где же модули в JavaScript?

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

Несколько тегов

Браузер может загружать любое количество JavaScript файлов, используя несколько тегов :

В среднем на веб-странице в 2018 году используется 25 отдельных скриптов, но это не практическое решение:

• Каждый сценарий инициирует новый HTTP-запрос, который влияет на производительность страницы. HTTP версии 2 облегчает проблему до некоторой степени, но это не помогает скриптам, указанным в других доменах, таких как CDN.
• Каждый скрипт останавливает дальнейшую обработку во время ее запуска.
• Управление зависимостями - это ручной процесс. В приведенном выше коде, если lib1.js ссылается на код в lib2.js, а lib2.js не найден, произойдет ошибка. Это может привести к дальнейшей остановке в обработке вообще всего остального JavaScript кода на странице.
• Функции из одного файла могут переопределять другие функции в другом модуле, если не используются соответствующие шаблоны модулей. Ранние библиотеки JavaScript были известны тем, что используют глобальные имена функций или определяют собственные методы.

Конкатенация скриптов

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

Загрузчики модулей

Такие системы, как RequireJS и SystemJS, представляют собой библиотеку для загрузки и создания пространства имен для других библиотек JavaScript во время выполнения. При необходимости модули загружаются с использованием методов Ajax. Эти системы помогают, но могут несоизмеримо усложниться для более крупных кодовых баз или сайтов.

Модульные сборщики, препроцессоры и транспиляторы

Бандлеры (сборщики модулей) добавляют дополнительный шаг в процесс компиляции, поэтому код JavaScript генерируется во время сборки. Код обрабатывается для включения зависимостей и создания одного объединенного файла кроссбраузерно совместимого с ES5. Наиболее популярные бандлеры Babel, Browserify, webpack, а также Grunt и Gulp, ориентированные на более широкий спектр задач.

Процесс сборки JavaScript кода требует определенных усилий, но есть и преимущества:

• Обработка автоматизирована, поэтому вероятность человеческих ошибок меньше.
• Дальнейшая обработка может продолжатся в направлении статического анализа кода, отладки, минимизации полученного файла и т. д.
• Транспилирование позволяет использовать альтернативные варианты JavaScript, такие как TypeScript или CoffeeScript.

На этом все, а в следующих статьях мы продолжим изучать модули в JavaScript.