Поле source в package.json

Parcel — это современный сборщик (bundler) для веб-приложений, предназначенный для автоматической обработки и объединения ресурсов проекта. Он анализирует зависимости между файлами, преобразует исходный код, оптимизирует ресурсы и формирует готовую сборку для запуска в браузере.

Главной особенностью Parcel является подход «zero configuration» — возможность начать работу практически без предварительной настройки. В большинстве случаев достаточно установить пакет и запустить команду сборки.

Parcel поддерживает:

JavaScript;
TypeScript;
JSX и React;
CSS;
Sass, Less, Stylus;
HTML;
изображения;
шрифты;
SVG;
Web Workers;
WebAssembly;
различные современные стандарты ECMAScript.

Назначение сборщиков в современной веб-разработке

Современные приложения состоят из множества файлов:

JavaScript-модулей;
таблиц стилей;
изображений;
конфигураций;
сторонних библиотек.

Браузер может загружать такие файлы отдельно, однако это приводит к ряду проблем:

большому количеству HTTP-запросов;
отсутствию оптимизации;
сложностям управления зависимостями;
несовместимости новых возможностей JavaScript со старыми браузерами.

Сборщик решает эти проблемы путем:

Анализа зависимостей.
Объединения файлов.
Минификации кода.
Оптимизации изображений.
Транспиляции современных возможностей JavaScript.
Разделения кода на отдельные чанки.

Parcel автоматизирует большинство этих задач.

Преимущества Parcel

Минимальная конфигурация

В отличие от многих других сборщиков, Parcel способен работать практически сразу после установки.

Пример запуска:

npm install --save-dev parcel

parcel src/index.html

Без дополнительной настройки будут обработаны:

JavaScript;
CSS;
изображения;
HTML;
многие другие ресурсы.

Высокая производительность

Parcel использует:

многопоточность;
кэширование;
инкрементальную сборку;
оптимизированный граф зависимостей.

Это значительно сокращает время пересборки проекта.

Автоматическое определение зависимостей

Parcel самостоятельно обнаруживает:

import './style.css';
import logo from './logo.png';
import { sum } from './utils.js';

Все необходимые файлы автоматически включаются в граф сборки.

Встроенная поддержка современных технологий

Из коробки поддерживаются:

ES Modules;
React;
TypeScript;
PostCSS;
Babel;
Sass;
CSS Modules.

Установка Parcel

Создание проекта:

mkdir parcel-project
cd parcel-project
npm init -y

Установка Parcel:

npm install --save-dev parcel

После установки пакет появляется в разделе зависимостей:

{
  "devDependencies": {
    "parcel": "^2.x.x"
  }
}

Структура проекта

Типичная структура приложения:

project/
│
├── src/
│   ├── index.html
│   ├── index.js
│   ├── styles.css
│   └── images/
│       └── logo.png
│
├── package.json
└── .gitignore

Первый проект на Parcel

HTML-файл

<!DOCTYPE html>
<html>
<head>
    <title>Parcel App</title>
</head>
<body>
    <h1>Parcel Example</h1>

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

JavaScript

console.log('Parcel works!');

Запуск:

npx parcel src/index.html

По умолчанию сервер запускается на:

http://localhost:1234

Скрипты package.json

Для удобства создаются команды:

{
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  }
}

Запуск режима разработки:

npm run dev

Сборка проекта:

npm run build

Режим разработки

Development Mode предназначен для активной разработки.

Команда:

parcel src/index.html

Возможности:

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

Hot Module Replacement (HMR)

HMR позволяет обновлять модули без полной перезагрузки страницы.

Пример:

if (module.hot) {
    module.hot.accept();
}

После изменения файла браузер получает обновлённый код практически мгновенно.

Преимущества:

сохранение состояния приложения;
высокая скорость разработки;
уменьшение количества перезагрузок.

Работа с JavaScript-модулями

Файл:

export function multiply(a, b) {
    return a * b;
}

Использование:

import { multiply } from './math.js';

console.log(multiply(2, 5));

Parcel автоматически обнаружит зависимость и включит её в сборку.

Работа с CSS

Импорт стилей возможен непосредственно из JavaScript.

body {
    background: #f5f5f5;
}

import './styles.css';

Parcel автоматически:

подключит стили;
оптимизирует CSS;
включит файл в сборку.

CSS Modules

CSS Modules позволяют создавать локальные классы.

Button.module.css

.button {
    background: blue;
    color: white;
}

Использование

import styles from './Button.module.css';

button.className = styles.button;

Parcel генерирует уникальные имена классов.

Пример:

.button_a1f23

Это предотвращает конфликты между стилями.

Поддержка Sass

Установка:

npm install sass

Файл:

$primary: blue;

body {
    color: $primary;
}

Импорт:

import './styles.scss';

Parcel автоматически скомпилирует Sass в CSS.

Поддержка Less

Установка:

npm install less

Файл:

@primary: red;

body {
  color: @primary;
}

Parcel самостоятельно обработает Less-файлы.

Работа с изображениями

Импорт изображения:

import logo from './logo.png';

const img = document.createElement('img');
img.src = logo;

document.body.appendChild(img);

Parcel:

копирует файл;
создаёт уникальное имя;
оптимизирует ресурс;
обновляет пути.

Импорт SVG

SVG может использоваться как обычный ресурс.

import icon from './icon.svg';

Либо напрямую в HTML:

<img src="./icon.svg">

Работа со шрифтами

Пример:

@font-face {
    font-family: 'Roboto';

    src: url('./fonts/Roboto.woff2')
         format('woff2');
}

Parcel автоматически включит шрифт в сборку.

Поддержка TypeScript

Установка:

npm install typescript

Создание файла:

function sum(a: number, b: number): number {
    return a + b;
}

console.log(sum(5, 7));

Parcel автоматически распознает файл:

index.ts

и выполнит компиляцию.

React и Parcel

Установка React:

npm install react react-dom

Создание компонента:

function App() {
    return <h1>Hello Parcel</h1>;
}

export default App;

Точка входа:

import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
    document.getElementById('root')
);

root.render(<App />);

Parcel автоматически настроит JSX-трансформацию.

Автоматическая транспиляция

Parcel использует Babel для преобразования современного JavaScript.

Исходный код:

const greet = name => `Hello ${name}`;

После сборки код преобразуется в форму, поддерживаемую целевыми браузерами.

Настройка целевых браузеров

Используется поле browserslist.

{
  "browserslist": [
    "last 2 versions",
    "> 1%"
  ]
}

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

Переменные окружения

Файл:

.env

Содержимое:

API_URL=https://api.example.com

Использование:

console.log(process.env.API_URL);

Parcel автоматически подставит значение переменной.

Производственная сборка

Команда:

parcel build src/index.html

Во время сборки выполняются:

минификация JavaScript;
минификация CSS;
tree shaking;
разделение кода;
оптимизация ресурсов;
удаление неиспользуемого кода.

Tree Shaking

Tree Shaking удаляет неиспользуемые части модулей.

Модуль:

export function add() {}

export function subtract() {}

export function multiply() {}

Использование:

import { add } from './math.js';

В итоговую сборку попадёт только функция:

add

Остальной код будет исключён.

Code Splitting

Code Splitting разбивает приложение на отдельные части.

Пример динамического импорта:

button.addEventListener('click', async () => {
    const module = await import('./admin.js');

    module.init();
});

Parcel создаст отдельный файл для:

admin.js

который загрузится только при необходимости.

Динамический импорт

Синтаксис:

const library = await import('./library.js');

Преимущества:

уменьшение стартового размера приложения;
ускорение загрузки;
более эффективное использование памяти.

Кэширование

Parcel активно использует кэш.

Каталог:

.parcel-cache

Хранит:

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

Благодаря этому повторные сборки выполняются значительно быстрее.

Работа с HTML

Parcel анализирует HTML-файлы как точки входа.

Пример:

<link rel="stylesheet" href="./styles.css">

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

Все ресурсы автоматически попадают в граф зависимостей.

Множественные точки входа

Возможен запуск нескольких страниц.

parcel src/*.html

Пример:

src/
├── index.html
├── about.html
└── contacts.html

Parcel сформирует отдельные страницы и общий набор ресурсов.

Оптимизация изображений

Во время production-сборки Parcel способен:

уменьшать размер файлов;
удалять лишние метаданные;
применять современные форматы;
оптимизировать SVG.

Результатом становится уменьшение объёма передаваемых данных.

Source Maps

Source Maps помогают отлаживать код после сборки.

Во время разработки они создаются автоматически.

Благодаря этому в DevTools отображаются оригинальные файлы:

index.js
styles.css
components/Button.jsx

вместо минифицированной версии.

Алиасы

В package.json можно определить псевдонимы путей.

{
  "alias": {
    "@components": "./src/components",
    "@utils": "./src/utils"
  }
}

Использование:

import Button from '@components/Button';

Это упрощает навигацию по крупным проектам.

Работа с Web Workers

Создание воркера:

const worker = new Worker(
    new URL('./worker.js', import.meta.url)
);

Файл воркера:

self.onmess age = e => {
    self.postMessage(e.data * 2);
};

Parcel автоматически создаст отдельный бандл для Worker.

Поддержка WebAssembly

Импорт WASM-модуля:

import init from './module.wasm';

await init();

Parcel корректно обработает бинарный ресурс и включит его в сборку.

Архитектура Parcel

Основные компоненты системы:

Asset

Представляет отдельный ресурс:

JS;
CSS;
PNG;
SVG;
HTML.

Transformer

Отвечает за преобразование ресурсов.

Примеры:

TypeScript → JavaScript;
Sass → CSS;
JSX → JavaScript.

Bundler

Формирует конечные бандлы на основе графа зависимостей.

Optimizer

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

Packager

Создаёт итоговые файлы сборки.

Конфигурация через .parcelrc

Файл:

{
  "extends": "@parcel/config-default"
}

Позволяет:

подключать собственные трансформеры;
создавать плагины;
переопределять поведение Parcel.

Плагины Parcel

Parcel имеет развитую систему расширений.

Типы плагинов:

Transformer;
Bundler;
Optimizer;
Runtime;
Resolver;
Reporter.

С помощью плагинов возможно практически полностью изменить процесс сборки.

Сравнение Parcel и Webpack

Возможность	Parcel	Webpack
Настройка	Минимальная	Часто объёмная
Скорость старта	Высокая	Средняя
Конфигурация	Почти не требуется	Обычно обязательна
Простота освоения	Высокая	Средняя
Гибкость	Высокая	Очень высокая
Экосистема	Большая	Огромная

Parcel особенно удобен для:

небольших проектов;
средних приложений;
прототипирования;
быстрого старта разработки.

Webpack чаще используется там, где требуется максимально детальная настройка процесса сборки.

Типичный процесс работы с Parcel

Создание проекта.
Установка Parcel.
Создание HTML-файла как точки входа.
Разработка приложения в режиме parcel.
Использование модульной структуры проекта.
Подключение стилей и ресурсов через импорт.
Настройка переменных окружения.
Использование динамических импортов для оптимизации.
Выполнение production-сборки командой:

parcel build src/index.html

Публикация содержимого итогового каталога сборки на сервере или хостинге.

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