Сборка веб-приложения с помощью Parcel
Development | Комментировать запись
Parcel – это очень быстрый многофункциональный сборщик модулей, который «из коробки» поддерживает ресурсы HTML, CSS, JavaScript, Image и TypeScript без необходимости в отдельных плагинах. Главное, что Parcel не требует конфигурации, достаточно просто направить его на начальный файл – и Parcel самостоятельно объединит, преобразует и минимизирует все ресурсы.
В этом мануале мы расскажем, как используется Parcel.
Читайте также: Создание глобальной шины событий в Vue 2
Установка Parcel
Все, что нужно для начала, – это пакет parcel-bundler. Установите его глобально с помощью npm или Yarn:
$ npm i -g parcel-bundler
# Yarn:
$ yarn global add parcel-bundler
Инициализируйте новый проект npm:
$ npm init
# Yarn
$ yarn init
Далее мы посмотрим на работу Parcel на примере очень простого приложения, которое состоит из главной страницы index.html, двух файлов JavaScript и двух файлов CSS. В тестовом приложении есть две кнопки, которые при нажатии меняют цвет фона страницы.
Вот содержание HTML-файла index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Color My World</title> <link rel="stylesheet" href="./styles.css"> </head> <body> <div class="controls"> <button id="color">Color!</button> <button id="premium-color">Premium color!</button> </div> <script src="./index.js"></script> </body> </html>
Обратите внимание: пути, которые мы используем для стилей и скриптов – относительные. Это важно, потому что именно это позволяет Parcel творить чудеса. На другие ресурсы, – например, на изображения, – также следует ссылаться с помощью относительных путей.
Наш входной файл JavaScript, index.js, выглядит так:
'use strict'; import premiumColors from './premium'; const colorBtn = document.getElementById('color'); const premiumColorBtn = document.getElementById('premium-color'); const availableColors = [ 'aliceblue', 'blanchedalmond', 'darkorchid', 'darkseagreen', 'khaki', 'lightblue' ]; colorBtn.addEventListener('click', () => { const randIdx = Math.floor(Math.random() * availableColors.length); document.documentElement.style.setProperty('--bg', availableColors[randIdx]); });
Как видите, здесь используются модули ES6, но Parcel также понимает синтаксис CommonJS.
Второй файл JavaScript, premium.js, содержит стандартный экспорт и цвета:
export default [ 'lightcoral', 'moccasin', 'cornflowerblue', 'burlywood', 'gainsboro', 'ivory' ];
Главный файл CSS, styles.css, импортирует другую таблицу со стилями для кнопок и определяет правила стиля для элемента body:
@import './button.css'; body { background: var(--bg, paleturquoise); height: 100vh; }
Файл button.css содержит стили кнопок, они очень просты:
button { background: peachpuff; font-size: 1.3em; border: none; padding: .4em; margin: .3em; border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,0.13); }
Примечание: Кроме того, Parcel «из коробки» поддерживает SASS, LESS и Stylus!
Итак, наше простое приложение готово, теперь мы можем вызвать parcel и направить его на файл index.html:
$ parcel index.html
Parcel сгенерирует различные пакеты в папке /dist, запустит локальный сервер по адресу http://localhost:1234/ и начнет прослушивать изменения.
Вы также можете указать другую папку вывода; это делается с помощью флага –out-dir:
$ parcel index.html --out-dir public
Parcel предоставляет команду watch для объединения и прослушивания изменений, но без запуска локального сервера:
$ parcel watch index.html
Когда приложение готово к производству, вы можете создать производственную сборку с помощью команды build:
$ parcel build index.html
Это отключит горячую замену модуля Parcel и минимизирует ресурсы JavaScript, CSS и HTML (с помощью UglifyJS, cssnano и htmlnano).
Что такое Babel и PostCSS?
Помимо объединения, Parcel может преобразовывать код с помощью Babel, PostCSS и PostHTML – тоже прямо из коробки.
Все, что вам нужно сделать – добавить необходимые зависимости и включить соответствующие файлы конфигурации в корневой каталог проекта, а обо всем остальном позаботится Parcel.
Например, вы могли бы использовать автопрефиксатор PostCSS для автоматического добавления префиксов. Сначала установите пакет:
$ npm install autoprefixer
# Yarn:
$ yarn add autoprefixer
А затем в корневой каталог проекта добавьте файл .postcssrc с таким содержимым:
{ "plugins": { "autoprefixer": true } }
Вот и все! Потом вот такой CSS:
.controls { display: flex; justify-content: center; align-content: center; align-items: center; height: 100%; }
будет преобразован в:
.controls { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; }
Примечание: Вы также можете указать ряд браузеров, на которые нацелен проект, используя Browserlist и добавив в проект файл .browserslistrc.
Parcel и TypeScript
«Из коробки» Parcel поддерживает даже TypeScript. Просто добавьте TypeScript в зависимости разработки проекта:
$ npm i typescript --save-dev
# Yarn:
$ yarn add typescript --dev
Затем создайте файл tsconfig.json и добавьте в его свой проект. Файл будет содержать следующие строки:
{ "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true } }
Теперь ваш файл index может указывать прямо на входной файл TypeScript. Вы можете вызвать parcel, как обычно – и код TypeScript будет автоматически конвертирован в код JS:
$ parcel index.html
... <script src="./index.ts"></script> ...
Кроме того, существует сторонний подключаемый модуль TypeScript, разработанный для Parcel. Он называется parcel-plugin-typescript и предоставляет проверку типов и отчеты об ошибках во время сборки.
Заключение
Как видите, благодаря простоте использования Parcel (который не требует конфигурации и быстро собирает пакеты) вы можете в кратчайшие сроки выпустить свое приложение в производство.
Чтобы узнать больше, обратитесь к официальной документации
Tags: CSS, HTML, Javascript, Parcel, TypeScript