TLDR: Я сделал симуляцию вспышки эпидемии, в которую можно поиграть здесь.

Установка

Теперь вы можете сразу начать с index.html и app.js для этой симуляции, этого будет более чем достаточно для того, что нам нужно. Но недавно я много читал об этом сборщике веб-приложений под названием Parcel и подумал, что просто попробую и посмотрю, действительно ли он так прост, как утверждается.

npm init -y для запуска нового проекта npm

npm install -D parcel-bundler чтобы добавить Parcel в свой проект

Создайте простой index.html, который подключается к app.js.

parcel index.html запустит локальный сервер, на котором размещен ваш индексный файл, по адресу http://localhost:1234/, который автоматически перезагрузит ваше приложение, когда вы внесете какие-либо изменения в свои файлы.

parcel build index.html для компиляции вашего проекта. Он автоматически минимизирует и разбивает код, чтобы он эффективно загружался клиенту. Не требует установки или конфигов.

Я впечатлен! Это действительно сборщик с нулевой настройкой. Я также протестировал добавление Tailwind CSS — он работает практически сразу из коробки, как по волшебству. Раньше я пытался использовать Tailwind CSS с другими настройками, и, честно говоря, я всегда сталкивался с ошибками или препятствиями, которые мне нужно было преодолеть, чтобы он стал полностью функциональным. Это может быть потому, что я не слишком хорошо разбираюсь в терминалах, а также все конфигурации и настройки чертовски меня смущают. Так что я очень доволен своим опытом использования Parcel.

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

Parcel не очищает вашу папку dist при сборке, поэтому она будет содержать более старые файлы, поскольку все они правильно хэшируются, поэтому они не переопределяют друг друга. Он также добавляет исходную карту в вашу сборку по умолчанию. У меня небольшое ОКР, поэтому я всегда хотел бы удалить все эти лишние файлы. Поэтому я добавлю это в свой package.json, чтобы сначала удалить все старые файлы, а также собрать проект без каких-либо исходных карт.

"scripts": {
  "prebuild": "rm -rf dist/*",
  "dev": "parcel index.html",
  "build": "parcel build index.html --no-source-maps"
},