Встроенный dev-сервер: параметры запуска

В процессе разработки веб-приложений важнейшей задачей становится быстрый просмотр изменений без необходимости вручную пересобирать проект и обновлять страницу браузера. Parcel включает встроенный сервер разработки (development server), который автоматически собирает проект, обслуживает файлы через HTTP и отслеживает изменения в исходном коде.

При запуске проекта в режиме разработки Parcel выполняет сразу несколько функций:

• собирает приложение;
• запускает локальный веб-сервер;
• отслеживает изменения файлов;
• автоматически обновляет страницу браузера;
• обеспечивает работу Hot Module Replacement (HMR);
• выводит диагностическую информацию и ошибки.

Основная команда запуска выглядит следующим образом:

parcel src/index.html

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

---

Базовый запуск dev-сервера

Наиболее распространённый способ запуска:

parcel index.html

После старта в консоли отображается примерно следующая информация:

Server running at http://localhost:1234

По умолчанию используются следующие параметры:

Параметр	Значение
Хост	localhost
Порт	1234
HMR	включён
HTTPS	выключен
Автооткрытие браузера	выключено

Сервер продолжает работать до его принудительной остановки.

---

Изменение порта

Если порт 1234 уже используется другим приложением, либо требуется запуск на определённом порту, применяется параметр --port.

Пример:

parcel index.html --port 3000

После запуска проект станет доступен по адресу:

http://localhost:3000

Другой пример:

parcel src/index.html --port 8080

Результат:

http://localhost:8080

Использование фиксированного порта особенно распространено при:

• интеграции с внешними сервисами;
• настройке прокси-серверов;
• работе с Docker;
• корпоративной разработке;
• настройке OAuth и других механизмов авторизации.

---

Настройка адреса хоста

По умолчанию сервер доступен только через localhost.

Для изменения адреса используется параметр:

--host

Пример:

parcel index.html --host 0.0.0.0

Теперь сервер принимает подключения со всех сетевых интерфейсов компьютера.

Это позволяет открывать приложение:

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

Пример комбинированного запуска:

parcel index.html --host 0.0.0.0 --port 3000

---

Автоматическое открытие браузера

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

Для этого применяется флаг:

--open

Пример:

parcel index.html --open

После успешного запуска Parcel автоматически откроет страницу:

http://localhost:1234

Комбинация с собственным портом:

parcel index.html --port 3000 --open

---

Отключение автоматического открытия

Если браузер не должен запускаться автоматически, параметр --open просто не используется.

Стандартный запуск:

parcel index.html

При этом сервер работает в обычном режиме, а переход по адресу выполняется вручную.

---

Работа через HTTPS

Некоторые возможности браузеров требуют обязательного использования HTTPS.

Например:

• Service Workers;
• Web Push;
• отдельные API устройств;
• некоторые механизмы аутентификации.

Для запуска сервера через HTTPS используется параметр:

--https

Пример:

parcel index.html --https

После запуска адрес станет выглядеть так:

https://localhost:1234

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

---

Использование собственных сертификатов

В проектах, максимально приближённых к боевому окружению, используются собственные сертификаты.

Пример:

parcel index.html \
  --https \
  --cert cert.pem \
  --key key.pem

Где:

• cert.pem — сертификат;
• key.pem — приватный ключ.

Такой подход позволяет тестировать:

• защищённые соединения;
• авторизацию;
• взаимодействие с внешними API;
• корпоративные политики безопасности.

---

Hot Module Replacement

Одной из ключевых возможностей dev-сервера является Hot Module Replacement.

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

Пример сценария:

1. Изменяется CSS-файл.
2. Parcel обнаруживает изменение.
3. Пересобирается только изменённый ресурс.
4. Браузер получает обновление.
5. Страница остаётся открытой без перезагрузки.

Для JavaScript процесс зависит от поддержки HMR конкретным модулем.

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

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

---

Отключение HMR

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

Для отключения HMR используется параметр:

--no-hmr

Пример:

parcel index.html --no-hmr

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

Подобный режим полезен для:

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

---

Настройка порта HMR

Механизм HMR использует отдельное соединение между браузером и сервером Parcel.

При необходимости можно явно указать порт:

--hmr-port

Пример:

parcel index.html --hmr-port 4000

Комбинированный вариант:

parcel index.html \
  --port 3000 \
  --hmr-port 4000

Такая настройка применяется при:

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

---

Настройка публичного URL

Иногда ресурсы должны загружаться не относительно корня сайта, а относительно определённого пути.

Используется параметр:

--public-url

Пример:

parcel index.html --public-url /app/

После сборки ссылки на ресурсы будут формироваться относительно каталога:

/app/

Например:

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

Это особенно важно при развёртывании приложения в подкаталоге сервера.

---

Вывод подробной информации

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

Пример:

parcel index.html --log-level verbose

Возможные уровни:

Уровень	Назначение
none	отключить вывод
error	только ошибки
warn	предупреждения
info	стандартный режим
verbose	подробная диагностика

Подробный режим помогает:

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

---

Очистка кеша при запуске

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

Иногда кеш необходимо игнорировать.

Пример:

parcel index.html --no-cache

Сервер выполнит полную пересборку проекта.

Полезно при:

• изменении конфигурации;
• обновлении зависимостей;
• поиске трудноуловимых ошибок;
• миграции между версиями Parcel.

---

Запуск с несколькими параметрами

В реальных проектах параметры обычно комбинируются.

Пример:

parcel src/index.html \
  --host 0.0.0.0 \
  --port 3000 \
  --open

Запускается сервер:

• на всех сетевых интерфейсах;
• на порту 3000;
• с автоматическим открытием браузера.

Другой пример:

parcel src/index.html \
  --https \
  --port 8443 \
  --open \
  --no-cache

Особенности такого запуска:

• HTTPS включён;
• используется порт 8443;
• кеш отключён;
• браузер открывается автоматически.

---

Использование через npm-скрипты

На практике параметры запуска чаще всего помещаются в файл package.json.

Пример:

{
  "scripts": {
    "dev": "parcel src/index.html",
    "dev:open": "parcel src/index.html --open",
    "dev:https": "parcel src/index.html --https",
    "dev:network": "parcel src/index.html --host 0.0.0.0"
  }
}

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

npm run dev

npm run dev:open

npm run dev:https

npm run dev:network

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

---

Типовые конфигурации запуска

Локальная разработка

parcel src/index.html

Стандартный режим с HMR и локальным сервером.

Разработка с мобильных устройств

parcel src/index.html \
  --host 0.0.0.0

Позволяет открывать приложение со смартфонов и планшетов.

Тестирование HTTPS

parcel src/index.html \
  --https

Используется для проверки возможностей, требующих защищённого соединения.

Отладка проблем сборки

parcel src/index.html \
  --no-cache \
  --log-level verbose

Позволяет получить максимально подробную информацию о процессе сборки.

Работа через фиксированный порт

parcel src/index.html \
  --port 8080

Удобно при интеграции с внешними сервисами и прокси-серверами.

---

Основные параметры dev-сервера

Параметр	Назначение
--port	изменение порта сервера
--host	указание сетевого интерфейса
--open	автоматическое открытие браузера
--https	запуск через HTTPS
--cert	сертификат HTTPS
--key	приватный ключ HTTPS
--no-hmr	отключение Hot Module Replacement
--hmr-port	настройка порта HMR
--public-url	базовый URL ресурсов
--log-level	уровень логирования
--no-cache	отключение использования кеша

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