Хорошие практики в JavaScript: сборка проекта

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

Во время разработки небольшого проекта мы не задумываемся над какой либо сборкой проекта, за исключением моментов когда сборщики необходимы для использования специфических возможностей JavaScript (import, export, etc...). Но с ростом проекта возрастает количество кода и логичным решением будет разбить код на файлы и подключать на страницах лишь необходимые файлы. Такой подход вызывает несколько проблем которые полностью решаются использованием сборщиков проектов:

• Отсутсвие единой точки входа в приложение
• Отсутствие возможности переиспользовать отдельные куски кода (или их приходится выносить в отдельные файлы, что приводит нас к следующему пункту)
• Большое количество подключаемых файлов
• Сложность поддержки и масштабирования проекта
• Необходимость писать код с учетом поддержки различными браузерами

Все эти проблемы легко решаются использованием сборщиков и сопутствующих инструментов.

Gulp + RequireJS

Gulp - инструмент для автоматизации рутинных действий при разработке проектов. Gulp запускается в среде Node.JS и выполняет задачи (таски) которые мы описываем в файле gulpfile.js.

Преимущества:

• Большое количество плагинов
• Широкая поддержка сообщества
• Большое количество материала и примеров настройки, что снижает до минимума порог вхождения
• Исполнение задач не относящихся на прямую к сборке проекта (запуск тестов, деплой проекта на сервер, архивация проекта для переноса)

Недостатки:

• Нет инструмента для работы с import, export модулей, что заставляет использовать сторонний инструмент (Require.JS)

Gulp идеально подходит для сборки небольших проектов, с его помощью можно легко скомпилировать JS из ES6 синтаксиса в ES5, подключить пре- и пост-процессоры для CSS для автоматического добавления кроссбраузерной поддержки стилей и минификации. Но на больших проектах Gulp не справляется из за предъявления к сборщику более жестких требований.

Долгое время Gulp был крайне популярен но ему на смену пришел более совершенный сборщик - WebPack, который удовлетворил все потребности больших проектов.

WebPack

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

Преимущества:

• Предназначен для работы с JS модулями
• Имеет обширную документацию
• Имеет большое сообщество

Недостатки:

• Без танцев с бубном не может исполнять задачи не относящиеся на прямую к сборке проектов
• Имеет более высокий порог вхождения

Логичным шагов в развитии экосистемы Front-end разработки стало появление WebPack. С ростом проекта и использованием различных фреймворков возникает необходимость использования одного JS файла являющегося единственной точкой входа в приложение. Это исключает возможность возникновения конфликтов и ошибок из за одновременной работы нескольких скриптов. Используя все преимущества WebPack мы можем обеспечить постепенную подгрузку необходимых модулей нашего JavaScript приложения и снизить начальную нагрузку на сеть для пользователей, обеспечить модульность нашего приложения без использования сторонних инструментов, использовать ES6 синтаксис, пре- и пост-процессоры CSS. Обзор на WebPack достоин отдельной статьи и не поместится в короткий экскурс так что советую Вам самостоятельно потрогать его, с документацией на официальном сайте это не составит труда.

Подводим итоги

Использование сборщиков оправдывает затраты времени на их изучение и первоначальную настройку. С подключением к проекту любого сборщика мы освобождаем себя от большого количества рутины и освобождаем время для творчества. На небольших проектах рационально использовать Gulp, если же Вы замахнулись на крупную акулу с современными фреймворками и прочими "новинками" то WebPack несомненно Ваш вариант.

На этом все, спасибо, что дочитали до конца, надеюсь эта статья помогла Вам.

Не забудьте подписаться что бы не пропустить свежие публикации