Dev-сервер в Parcel предназначен для локальной разработки с автоматической пересборкой проекта при изменениях исходного кода. Он обеспечивает быстрый цикл разработки за счёт инкрементальной сборки, кэширования и встроенной поддержки Hot Module Replacement (HMR).
Основная команда для запуска:
parcel serve index.htmlParcel автоматически определяет точку входа, собирает зависимости и поднимает локальный сервер с отслеживанием изменений файлов.
parcel serveПри запуске dev-сервера Parcel выполняет несколько ключевых этапов:
Parcel ориентирован на минимальную конфигурацию: отсутствует необходимость вручную задавать конфиги для большинства сценариев.
parcel serve <entry-file>parcel serve src/index.htmlЕсли проект содержит HTML-файл как точку входа, Parcel автоматически подтягивает все связанные ресурсы: JavaScript, CSS, изображения и шрифты.
serveВ Parcel v2 возможен упрощённый запуск:
parcel index.htmlВ этом случае Parcel автоматически включает режим разработки и
поднимает dev-сервер. Команда serve делает поведение более
явным и используется в скриптах и CI-окружениях.
Parcel реализует Hot Module Replacement без дополнительной конфигурации. Изменения в модулях применяются без полной перезагрузки страницы.
Ключевые особенности:
Parcel использует файловый кэш .parcel-cache, который
ускоряет повторные сборки:
По умолчанию используется порт:
http://localhost:1234Если порт занят, Parcel автоматически выбирает следующий доступный.
Dev-сервер работает не только с HTML:
Parcel строит единый граф зависимостей независимо от типа ресурсов.
parcel serve index.html --port 3000Фиксирует порт dev-сервера, что полезно для интеграции с внешними инструментами.
parcel serve index.html --no-hmrВ этом режиме изменения приводят к полной перезагрузке страницы.
parcel serve index.html --no-cacheИспользуется при отладке проблем сборки или конфликтов зависимостей.
parcel serve index.html --no-openParcel по умолчанию может автоматически открывать браузер при старте сервера.
Типичная структура:
project/
├── src/
│ ├── index.html
│ ├── index.js
│ └── styles.css
├── package.json
└── .parcel-cache/После запуска parcel serve дополнительно
формируются:
.parcel-cacheЧасто dev-сервер подключается через npm-скрипты:
{
"scripts": {
"dev": "parcel serve src/index.html"
}
}Запуск:
npm run devЭто обеспечивает единообразный способ старта проекта в разных средах.
HTML-файл выступает центральной точкой графа зависимостей:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<script type="module" src="./index.js"></script>
</body>
</html>Parcel:
<script> и
<link>HMR работает через runtime-слой Parcel, который внедряется в приложение.
Поведение:
При изменении файла Parcel:
Dev-сервер:
Production сборка:
parcel build index.htmlЧастые сценарии диагностики:
Причины:
Решение через указание другого порта:
parcel serve index.html --port 8080Симптомы:
Решение:
parcel serve index.html --no-cacheПричины:
Parcel автоматически выводит диагностические сообщения в консоль браузера и терминал.
Parcel использует событийную модель наблюдения:
Сервер не пересобирает проект полностью без необходимости.
Parcel поддерживает HTTPS-режим:
parcel serve index.html --httpsИспользуется для сценариев, где требуется тестирование API, завязанных на защищённое соединение.
Оптимизации включают:
Эти механизмы обеспечивают быстрый отклик даже при больших проектах.
Parcel поддерживает несколько точек входа:
parcel serve page1.html page2.htmlКаждый HTML-файл становится отдельным приложением внутри одного dev-сервера с независимым графом зависимостей.
При старте parcel serve выполняются этапы:
Parcel не останавливает dev-сервер при ошибках сборки. Вместо этого:
Такой подход позволяет сохранять непрерывность работы сервера.