Что такое сборщики JavaScript и зачем их использовать

JavaScript - это интерпретируемый язык, который не нуждается в компиляции. Ваш браузер может выполнять тот же код, который вы пишете. Так почему же мы используем сборщики JavaScript?

Меньше JS файлов

Исторически сложилось так, что количество файлов JS, используемых веб-сайтом, имело решающее значение. Производительность снижалась из-за большого количества небольших файлов. Браузеры загружали каждый файл с отдельным HTTP-запрос. Для каждого запроса требовалось соединение между браузером и сервером, а для его установления требовалось время.

Благодаря HTTP / 2, количество файлов теперь не особо большая проблема. Но, объединение файлов вместе имеет смысл. Каждый запрос кэшируется отдельно, поэтому наличие большого количества файлов усложняет обеспечение того, чтобы браузер не получал устаревший код из кэша.

Кроме того, до 2018 года многие браузеры не поддерживали модули ES. Вы просто загружали много файлов из HTML, и все они имели одну и ту же глобальную область видимости.

Сборщики JavaScript решают обе проблемы, поскольку они:

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

Простой импорт из node_modules

Сборщики предоставляют вам возможность импорта зависимостей, что намного приятнее, чем загрузка их в виде модулей ES. Чтобы использовать node_modiles без сборщика вам необходимо было бы:

развернуть node_modules на вашем продовом сервере
используйте относительный путь от вашего файла к файлу, который вы хотите импортировать

Относительный путь - большая головная боль, потому что он заставляет вас писать импорт немного по-разному в зависимости от того, насколько глубоко вы находитесь в структуре папок. Итак, для использования Lodash у вас получится что-то такое:

const _ = require('../node_modules/lodash/lodash.js');

// Или если вы закопались в папки немного дальше
const _ = require('../../node_modules/lodash/lodash.js');
...
// И дальше по аналогии

Сборщики позволяют вам писать просто без использования относительного пути.

Импорт других типов файлов

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

Это ограничение заставит вас импортировать CSS из HTML, в то время как остальная часть компонента импортируется в JavaScript, что вынудит вас синхронизировать два несвязанных файла.

Сборщики JavaScript устраняют эту проблему, позволяя вам управлять всеми этими зависимостями непосредственно из ваших JS-файлов:

import './core.js';
import './style.css';

Транспилировать код

Большая часть JavaScript - это не простой JavaScript...

Код может быть изначально написан на таких языках, как TypeScript, а затем скомпилирован в JavaScript. Эта компиляция кода называется транспирацией.
Большая часть JavaScript транспилируется по нескольким причинам.

Сокращение кода

Если вы пишете свой код "по православному", то скорее всего вы делаете следующее:

даете переменным понятные имена
используете отступы в коде
оставляете комментарии для других разработчиков

Это добавляет беспорядок, который ничего не значит для компилятора. Минимизация - это первый шаг к уменьшению размера полезной нагрузки. Сборщик удаляет все, что не оказывает никакого влияния на ваше приложение.

Понижение версии для старых браузеров

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

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

Разновидности JavaScript

Помимо простого JavaScript, вы можете использовать многие из его разновидностей:

TypeScript
PureScript
Elm
CoffeeScript

Интересно:

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

Отдельная сборка для разных вариантов использования

Как только вы начинаете компилировать свой код с помощью сборщиков, возникают новые возможности. С самого начала вы, скорее всего, будете компилировать код одним способом для продового деплоя, а другим - для локальной разработки.

Если вы пишете модульные тесты, возможно, вам интересно узнать, насколько
хорошо ваш код покрыт тестами. Существуют инструменты покрытия кода, которые делают именно это. Для них требуется специальная сборка, включающая инструменты, которые подсчитывают количество посещений каждой строки кода во время прохождения тестов.

На этом сегодня все, надеюсь, теперь вы лучше понимаете что такое сборщики JavaScript и зачем их стоит использовать!

Не забывайте подписываться на мой телеграм канал, чтобы не пропустить новые полезные статьи из мира фронта и 3D!

Читайте еще:

#javascript #css #bundler #typescript #frontend