Начнем с определения сборщика JavaScript. Сборщик JavaScript — это программа, которая компилирует весь ваш код и его зависимости в один файл JavaScript, который готов к работе и может быть загружен в браузере. Кроме того, при работе с библиотеками, которые имеют множество зависимостей, или когда ваш проект становится слишком большим для одного файла, вы можете использовать сборщик JavaScript. Тот факт, что упаковщик создает граф зависимостей, когда он перемещается по вашим первым файлам кода, является потрясающей функцией. Это указывает на то, что сборщик модулей отслеживает как зависимости ваших исходных файлов, так и требования третьих сторон, начиная с выбранной вами точки входа. Это дерево зависимостей обеспечивает актуальность и отсутствие ошибок всех файлов исходного кода и связанных файлов.
Следующий вопрос, который нужно задать, — зачем нам использовать упаковщики.
В JavaScript исторически не было стандарта для запроса зависимостей из вашего кода. Старые версии браузеров не понимали современный стиль написания javascript-кода es6. Стиль кодирования Es6 включал в себя такие функции, как «импорт», «экспорт» или «требование», функции стрелок, JSX и т. д. Таким образом, упаковщик объединяет весь ваш код в один файл и отправляет его в браузер в виде так, чтобы он понял ваш код.
Например, если в прошлом вы хотели написать код javascript для веб-приложения погоды, ваш код выглядел бы так:
<head> <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="/js/navbar.js"></script> <script src="/js/weatherapi.js"></script> <script src="/js/main.js"></script> <script> // Here goes some code </script> </head
Но теперь при использовании сборщика файлы и их зависимости будут объединены в один файл, например:
<head> <script type="text/javascript" src="/bundle.js"></script> </head
Из приведенного выше примера легко понять, почему упаковщики очень полезны. Приведенный выше код намного легче читать и понимать.
Ниже приведены некоторые преимущества использования упаковщиков:
- Многие популярные сборщики модулей имеют функции оптимизации производительности, которые ускоряют работу вашего кода в браузере.
- Они предлагают согласованную инструментальную среду, которая освобождает вас от бремени зависимостей.
- Сборщики предлагают функции, повышающие производительность, такие как надежные отчеты об ошибках, которые позволяют программистам легко выявлять и устранять проблемы.
- Мы можем использовать npm, так как require() и экспорты реализованы аналогично Node.js и ищут зависимости в каталоге «модули узла». На этой основе вы можете быстро устанавливать и публиковать новые библиотеки и использовать возможности управления версиями npm.
- Некоторые сборщики удаляют ненужный код из конечного файла, оставляя только тот код, который требуется вашему приложению для работы.
Существуют разные типы сборщиков, но я буду говорить только о парцеллах и веб-пакетах.
Посылка
Упаковщик пакетов — это инструмент быстрой сборки, который позволяет разработчикам настраивать модули (Js, CSS и HTML), необходимые для разработки. Это второй по популярности сборщик после webpack.
Для начала запустите npm i parcel.
Допустим, у вас есть образец шаблона HTML:
<html>
<body>
<script src="./index.js"></script>
</body>
</html>После этого запустите parcel index.html, чтобы использовать Parcel для создания файла HTML.
Плюсы
- Нулевая конфигурация
Parcel решает проблемы конфигурации, с которыми сталкиваются Webpack и Browserify, предоставляя разработчикам производительную архитектуру, необходимую для быстрой веб-разработки. Существует также поддержка нескольких ресурсов, таких как Webpack, позволяющий создавать пакеты для всех видов ресурсов, не связанных с JavaScript, таких как CSS, HTML и изображения.
2. Быстро
Parcel быстро предоставляет премиальные функции оптимизации ресурсов, такие как горячая замена модулей и отложенная загрузка разделенного кода. «Согласно последним тестам, скорость сборки Parcel составляет 9,98 с, по сравнению с 22,98 с Browserify и 20,71 с Webpack. Использование встроенной техники кэширования Parcel может дать более быстрые результаты с эталонным временем 2,64 с.
3. Оптимизация активов
Такие функции, как разделение кода, позволяют разбивать файлы кода на фрагменты, тем самым сокращая время загрузки.
Минусы
- Отсутствие расширенных настроек
Как авторитетный упаковщик, Parcel идеально подходит для небольших и средних приложений. Тем не менее, заставить его работать для сложных приложений, где вам нужно изменить конфигурации, может быть утомительно. В этой ситуации большинство разработчиков предпочитают использовать Webpack.
Вебпак
Webpack функционирует как преобразователь, минимизатор и оптимизатор всех типов файловых ресурсов и ресурсов, а также как сборщик статических модулей для файлов JavaScript благодаря множеству расширенных и настраиваемых функций. Не только это. Экосистема плагинов и загрузчиков для Webpack также достаточно надежна.
Начать так же просто, как запустить npm i webpack
Плюсы
- Поддержка нескольких ресурсов
В дополнение к встроенной поддержке файлов JS, Webpack имеет богатую экосистему плагинов, на которую он опирается для объединения других файлов, таких как CSS и изображения.
2. Оптимизация активов
Такие функции, как разделение кода, позволяют разбивать файлы кода на фрагменты, тем самым сокращая время загрузки. Существует замена горячего модуля, которая помогает вам управлять модулями без полной перезагрузки браузера. Разработчики могут использовать загрузчики для предварительной обработки своих файлов, что ускоряет выполнение приложений. Эти и другие настраиваемые функции оптимизации сделали Webpack самым популярным сборщиком JS.
3. Продуктивность разработчиков
При работе со сложной задачей, такой как объединение модулей в качестве разработчика, очень важно иметь:
- Обширная документация.
- Надежная экосистема сторонних инструментов, на которую вы можете положиться.
- Эффективный процесс отладки ошибок, облегчающий вашу работу.
Этим трем потребностям отвечает Webpack, который предоставляет обширную экосистему плагинов и загрузчиков, а также отладку на основе исходной карты. Не только это. Основной метод кэширования Webpack позволяет программистам быстро создавать приложения.
Минусы
- Сложный
Многочисленные разработчики, у которых есть отношения любви и ненависти к Webpack, считают его сложность палкой о двух концах. Он также имеет сложную кривую обучения и является сложным.
2. Багги и Медленно
Подход Webpack с включенными батареями иногда может привести к тому, что интеграция приложений Webpack будет чрезмерно спроектирована. Чрезмерная зависимость от плагинов для выполнения простых функций может привести к тому, что упаковщик замедлит работу W, что потребует технической отладки, чтобы сделать его хорошо оптимизированным.
3. Не подходит для учащихся
Webpack в некотором смысле хорош для учащихся, потому что он просто дает вам все инструменты, необходимые для написания кода, без необходимости что-либо настраивать. Одна линия команды, и вы получите все, что вам нужно. Почему я скажу, что это не подходит для учащихся, так это потому, что использование этой одной строки команды как бы бросает вас «в середину вашего проекта», вы не будете знать, как вы туда попали или как эти пакеты работают «под капотом». Это в любом случае умозрительно.
Начните использовать сборщик JavaScript сегодня. Оформить заказ посылка или вебпак.
Вдохновлен Брайаном Холтсом из frontend masters.
