Учебник Parcel

Введение в Parcel
- Что такое Parcel и зачем он нужен
- Место Parcel среди других сборщиков: Webpack, Vite, Rollup, esbuild
- Философия zero-config и её практические последствия
- Когда выбирать Parcel, а когда нет
- Версии Parcel: отличия v1 и v2
- Обзор архитектуры: как Parcel обрабатывает граф зависимостей
Установка и первый запуск
- Требования к окружению: Node.js, npm, yarn, pnpm
- Локальная установка vs глобальная
- Создание проекта с нуля
- Структура минимального проекта
- Точки входа: HTML, JS, TypeScript, CSS
- Запуск dev-сервера: parcel serve
- Сборка для продакшена: parcel build
- Флаги командной строки и их назначение
- Анализ вывода в терминале
Конфигурация проекта
- Файл .parcelrc: структура и синтаксис
- Расширение конфигурации по умолчанию
- Поле targets в package.json
- Поле source в package.json
- Настройка browserslist
- Переменные окружения: файлы .env и .env.local
- Переменная NODE_ENV и её влияние на сборку
- Конфигурация через package.json: поле parcel
Работа с JavaScript и TypeScript
- Поддержка ES-модулей и CommonJS
- Динамический импорт и разделение кода
- Tree shaking: как Parcel удаляет неиспользуемый код
- Настройка Babel: встроенная трансформация
- Подключение кастомного babel.config.js
- TypeScript без дополнительной настройки
- Файл tsconfig.json и его влияние на сборку
- Декораторы и экспериментальные возможности
- Поддержка JSX: React, Preact, SolidJS
- Настройка pragma для JSX
- Обработка JSON, YAML, TOML как модулей
- Импорт WebAssembly
- Импорт через URL: new URL(...)
- Glob-импорты
Работа со стилями
- Поддержка обычного CSS
- CSS-модули: включение и использование
- PostCSS: встроенная интеграция
- Подключение плагинов PostCSS
- Sass и SCSS
- Less
- Stylus
- CSS Custom Properties и их обработка
- @import и разрешение зависимостей в стилях
- Autoprefixer и настройка браузерных таргетов
- Критический CSS
- Встроенные стили в HTML
Работа с HTML
- HTML как точка входа
- Обработка атрибутов: src, href, srcset, data-src
- Встроенные скрипты и стили
- Шаблонизация через HTMLElement
- Минификация HTML в режиме production
- Обработка нескольких HTML-файлов
- Подстановка переменных окружения в HTML
Обработка статических ресурсов
- Изображения: PNG, JPEG, WebP, AVIF, SVG
- Импорт изображений в JS и CSS
- Оптимизация изображений: встроенные возможности
- @parcel/transformer-image и sharp
- Шрифты: подключение и обработка
- Аудио и видео файлы
- Медиа-файлы как URL
- Правила инлайнинга мелких ресурсов
- Копирование файлов без обработки
Разделение кода и ленивая загрузка
- Автоматическое разделение кода
- Shared bundles: общие зависимости
- Динамический import() и его поведение в Parcel
- React.lazy и Suspense
- Prefetching и preloading бандлов
- Именование чанков
- Настройка стратегии разделения
Режим разработки и dev-сервер
- Встроенный dev-сервер: параметры запуска
- Hot Module Replacement: принцип работы
- HMR API: module.hot.accept, module.hot.dispose
- Fast Refresh для React
- Настройка хоста и порта
- HTTPS в режиме разработки
- Проксирование API-запросов
- Source maps: настройка и использование
- Lazy mode: ленивая компиляция в dev
Таргеты и мультисборка
- Концепция targets в Parcel
- Браузерный таргет
- Node.js таргет
- Таргет для Web Workers
- Electron таргет
- Сборка библиотеки: library target
- Одновременная сборка нескольких таргетов
- Настройка outputFormat: esmodule, commonjs, global
- Настройка isLibrary
- Управление externals
Оптимизация продакшен-сборки
- Что происходит при parcel build
- Минификация JavaScript: SWC Minifier
- Minifier для CSS
- Minifier для HTML
- Scope hoisting и его требования
- Инлайнинг маленьких файлов
- Content hashing и долгосрочное кэширование
- Управление именами выходных файлов
- Анализ размера бандла
- Настройка source maps для продакшена
Кэширование
- Файловый кэш Parcel: где хранится
- Директория .parcel-cache
- Инвалидация кэша
- Принудительная очистка: --no-cache
- Кэш в CI/CD окружении
- Производительность сборки и кэш
Трансформеры, резолверы и пакомперы
- Архитектура плагинов Parcel 2
- Типы плагинов: Transformer, Resolver, Packager, Optimizer, Reporter, Namer
- Transformer: преобразование одного типа файла
- Resolver: разрешение путей и алиасов
- Packager: сборка финального файла
- Optimizer: финальная обработка бандла
- Reporter: вывод информации о сборке
- Namer: управление именами выходных файлов
Написание собственных плагинов
- Инициализация плагина
- API плагина: структура и экспорт
- Написание простого Transformer
- Работа с AST внутри плагина
- Написание Resolver-плагина
- Написание Reporter-плагина
- Публикация плагина в npm
- Подключение локального плагина
Работа с монорепозиторием
- Workspaces: yarn, npm, pnpm
- Общий .parcelrc для монорепозитория
- Сборка пакетов внутри монорепозитория
- Зависимости между пакетами и их разрешение
- Совместное использование кэша
Parcel для библиотек
- Отличия сборки приложения и библиотеки
- Настройка package.json: main, module, exports
- Генерация типов TypeScript
- Внешние зависимости: поле peerDependencies и externals
- Форматы вывода: CJS, ESM, UMD
- Публикация библиотеки в npm
Интеграция с фреймворками
- React: полная настройка
- Preact: алиасы и оптимизация
- Vue 3: @parcel/transformer-vue
- Svelte: @parcel/transformer-svelte
- SolidJS
- Lit и Web Components
- Angular: ограничения и совместимость
Parcel и Web Workers
- Импорт Worker через new Worker(new URL(...))
- Service Workers
- Shared Workers
- Worklet-ы: CSS Houdini, Audio Worklet
- Разделение кода в Worker-контексте
Parcel в Node.js проектах
- Сборка серверного кода
- Бандлинг для Lambda и serverless-функций
- Настройка node target
- Обработка нативных модулей
- Бинарные скрипты: поле bin
Командная строка и автоматизация
- Полный справочник CLI
- Parcel как программный API
- Класс Parcel: инициализация и методы
- Подписка на события сборки
- Интеграция в скрипты npm
- Использование в Makefile и shell-скриптах
Диагностика и отладка
- Интерпретация ошибок сборки
- Режим --log-level
- Диагностические сообщения: структура и коды
- Отладка трансформаций
- Отладка резолюции модулей
- Проблемы с кэшем и их решение
- Типичные ошибки и их причины
- Профилирование скорости сборки
Производительность и масштабирование
- Многопоточность: worker threads в Parcel
- Влияние размера проекта на скорость сборки
- Оптимизация конфигурации для больших проектов
- Выборочная сборка изменённых таргетов
- Ограничения Parcel при очень большом графе зависимостей
Миграция на Parcel
- Миграция с Create React App
- Миграция с Webpack
- Миграция с Vite
- Миграция с Parcel v1 на v2
- Сравнение конфигурационных подходов
- Часто теряемые функции и их эквиваленты в Parcel