Сборка веб-приложения с помощью 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