Поскольку потоки на основе FTP начали замедляться, а потоки git стали расти, мы создаем больше статических сайтов, чем когда-либо. Теперь у нас есть доступ к простым, дешевым и эффективным инструментам, будь то CDN или цепочки инструментов CI/CD. Это породило совершенно новый феномен под названием JAMStack и новый подход к веб-разработке.

Конструкторы статических сайтов, лежащие в основе JAMStack, становятся все лучше и лучше, но я нахожу их иногда излишними для простых веб-сайтов. Если вы возьмете простой личный веб-сайт, он содержит только основную контактную информацию и почти никогда не меняется. Такие инструменты, как Hugo или NextJS, могут быть немного утомительными для такой небольшой задачи. Тем не менее, они также предоставляют некоторые действительно важные оптимизации из коробки: расширенные возможности минимизации CSS, JS и HTML, оптимизацию изображений…

Так что, если вам нужен действительно простой в настройке, быстрый и мощный генератор статического электричества? Сюда входит Посылка 📦.

Parcel-bundler: упрощение веб-бандлинга

Времена, когда веб-сайты представляли собой простую строку HTML-разметки, давно ушли в прошлое. В настоящее время веб-сайт использует несколько разных языков и должен работать в самых разных браузерах, дисплеях и устройствах с молниеносной скоростью. Для этого нам нужно связать вместе все наши исходные файлы и обработать их, чтобы обеспечить совместимость, минимизацию…

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

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

HTML на стероидах 💪

Написание HTML-разметки может быть утомительным, даже с такими инструментами, как Emmet. К сожалению, Parcel принимает в качестве входных данных только HTML по умолчанию (также JSX, если вы работаете с React). Чтобы делать вещи быстрее, мне нравится использовать язык шаблонов Pug (ранее Jade). Это также дает нам доступ к includes и, таким образом, к партиалам. Возможность повторного использования кода также важна для HTML.

Мы можем добавить файл posthtml.config.js в корень нашего проекта (с файлом package.json), чтобы включить PostHTML после добавления его зависимостей. Это позволяет нам анализировать и транспилировать Pug в HTML:

npm i --save posthtml-pug

Позже мы также можем добавить другие плагины posthtml, такие как posthtml-md или posthtml-schemas. Parcel минимизирует HTML по умолчанию, так что это все, что нам нужно для нашей разметки.

Выберите свой вкус CSS 🍰

По умолчанию Parcel поддерживает CSS, LESS, SASS и Stylus. Но я фанат PostCSS и CSSNext. Это быстро и, что более важно, позволяет нам использовать все функции CSS, но при этом быть совместимым с желаемыми браузерами. Что еще более интересно, когда используемые вами спецификации CSS добавляются браузерами, вам не нужно ничего менять, чтобы ваш CSS работал еще лучше.

Чтобы добавить поддержку, мы просто добавляем файл конфигурации postcss.config.js в корень нашего проекта NPM.

А затем и его зависимости:

npm i --save postcss-cssnext

Современный JS для всех 🚀

Стандартом стало использование современного JavaScript для разработки и преобразование его в более широко совместимый вариант JS. Для этого в Parcel включен Babel. Он использует предустановку env по умолчанию для компиляции JavaScript. Мы можем изменить его, добавив файл .babelrc в корень нашего проекта, но это не обязательно для нашего простого статического веб-сайта.

Собираем все вместе 📦

Теперь, когда мы все настроили, мы можем создать наш сайт. Чтобы все было аккуратно, давайте добавим команду start и build в наш package.json.

"scripts": {
  "build": "parcel build src/index.pug",
  "start": "parcel serve src/index.pug"
}

Таким образом, мы можем просто ввести npm start в целях разработки. Это запустит сервер разработки с включенной горячей перезагрузкой для мгновенной обратной связи о ваших изменениях. npm build создаст оптимизированный пакет для производства. Таким образом, мы можем даже интегрировать это через процесс непрерывного развертывания непосредственно в какое-либо решение для хостинга, такое как Netlify. Таким образом, мы можем иметь всегда актуальный, быстрый и бесплатный веб-сайт.

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