Parcel

🚀 Молниеносно быстрый

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

📦 Свяжите все свои ресурсы

Parcel из коробки имеет поддержку: JS, CSS, HTML, файловых ресурсов и многое другое — нет необходимости в плагинах.

🐠 Автоматические трансформации

Код автоматически трансформируется, используя Babel, PostCSS и PostHTML, при необходимости — даже node_modules.

✂️ Разделение кода без настройки

Используя динамический синтаксис import(), Parcel разделяет ваши готовые бандлы, поэтому вы загружаете только то, что нужно при начальной загрузке.

🔥 Горячая замена модуля

Parcel автоматически обновляет модули в браузере, если вы делаете изменения в процессе разработки, без настройки.

🚨 Дружественное логирование ошибок

Parcel выделяет синтаксис кода, когда он сталкивается с ошибками, чтобы помочь вам определить проблему.

Привет, мир!

Начните своё приложение с HTML-файла. Parcel следует за зависимостями из него, для создания всего вашего приложения.

✏️ index.html

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

🛠 index.js

// Импортируйте компоненты
import main from './main';

main();

🛠 main.js

// Импортируйте CSS-модуль
import classes from './main.css';

export default () => {
  console.log(classes.main);
};

💅 main.css

.main {
  /* Ссылка на файл изображения */
  background: url('./images/background.png');
  color: red;
}

Просто выполните parcel index.html в консоли для запуска локального сервера. Импортированные JavaScript, CSS, изображения и многое другое — просто работают! 👌

Бенчмарки

Упаковщик	Время, сек.
browserify	22,98
webpack	20,71
parcel	9,98
parcel (с кэшем)	2,64

За основу было взято приложение с достаточно большим размером, содержащее 1726 модулей, 6,5 МБ несжатого кода. Бандл был сделан на 2016 MacBook Pro с 4-ядерным ЦП.