Parcel === webpack на минималках
Parcel - это сборщик веб-приложений. Он относится к той же категории инструментов, что и webpack, но с другим ценностным предложением.Parcel обещает многое делать вообще без какой-либо настройки и к тому же собирать код достаточно быстро.
Набор основных функций этого сборщика включает в себя:
- сборка статики (JS, CSS, HTML, картинки)
- нулевое количество конфигурации
- автоматические преобразования с использованием Babel, PostCSS и PostHTML
- обработку хот-релоуда
- кеширование и распараллеливание сборки для ускорения
Установка
Parcel можно установить при помощи yarn:
yarn global add parcel-bundler
npm install -g parcel-bundler
Запуск Parcel
Parcel может быть запущена с помощью следующей команды:
parcel watch index.html
после запуска начнется отслеживание HTML-страницы и если файл будет как-то изменен, то это запустит пересборку.
Также можете вместо этого указать Parcel следить за JS-файлом:
parcel watch entry.js
Сервер для разработки
Удобно, что Parcel поставляется со встроенным сервером разработки, так что вам не нужно его настраивать. Вы можете стартануть его вот так:
parcel index.html
Релизный бандл
Когда вы будете довольны своим приложением и захотите создать готовый к работе бандл, просто запустите:
parcel build index.html
Продовая сборка отключает хот-релоад и не отслеживает изменения в файле, файлы сборки существуют после завершения билда и используется минификатор для его создания.
Сборка также автоматически запускает переменную NODE_ENV в рабочий режим, чтобы заставить библиотеки генерировать продовый код (например, React и Vue).
Статика
Parcel поддерживает как модули ES (import...), так и CommonJS (require...).
Он выполняет автоматическое разделение кода с использованием динамического импорта.
Что это значит и почему это полезно?
Динамический импорт возвращает промис, и вместо загрузки всех зависимостей при запуске приложения мы можем попросить браузер загрузить их, но выполнить только некоторые части приложения, когда они будут готовы.
Или же мы можем попросить браузер загружать их только тогда, когда нам это нужно, например, когда пользователь нажимает на определенную ссылку.
CSS
Parcel поддерживает обычный CSS, Sass, Less и Stylus.
Трансформация
Когда Parcel обнаружит, что у вас есть одна из конфигураций:
он будет использовать это автоматически в процессе сборки.
Горячая перезагрузка
Горячая перезагрузка (HMR) - полезная функция при создании приложения. Когда мы сохраняем новую копию CSS или JavaScript, HMR заботится об обновлении в браузере, не обновляя все приложение.
Parcel vs webpack
Давайте сравним Parcel с webpack, потому что это очень популярные сборщики, и вы, вероятно, слышали о них или использовали в проектах. Также приятно знать различия, даже если вы никогда не использовали ни один из них.
webpack позволяет вам делать массу вещей, и хотя это очень круто, это также означает, что нам нужно тщательно настроить его, чтобы он делал именно то, что мы хотим.
Иногда webpack.config.js разрастается до сотен строк, и мы копируем / вставляем его в следующий проект, и это очень неприятно, если нам нужно его изменить.
Parcel обещает нам делать многое из того, что делает webpack, но вообще без какой-либо настройки, полагаясь на соглашения, а не на конфигурацию.
Какой из них вы должны использовать? Я бы рекомендовала Parcel для небольших проектов и webpack, когда вы перерастете возможности Parcel и захотите получить абсолютный контроль над всем, что делает ваш проект.
На этом все, чтобы не пропустить новые интересные посты - не забывай подписаться на телеграм канал!