HTML как точка входа

В Parcel HTML-файл выступает первичной точкой входа, от которой строится весь граф зависимостей приложения. В отличие от классических сборщиков, где точка входа задаётся через JavaScript (например, index.js), Parcel ориентируется на декларативную структуру HTML и извлекает из него все подключённые ресурсы: скрипты, стили, изображения и любые другие ассеты.

Такой подход позволяет воспринимать HTML как центр приложения, а не как вспомогательный слой. В результате структура проекта становится более прозрачной: достаточно открыть HTML-файл, чтобы увидеть все основные связи приложения.

Роль HTML в системе сборки Parcel

При запуске сборки Parcel анализирует HTML-файл как исходный модуль. Он не просто копирует его в итоговую директорию, а выполняет полноценный разбор:

  • извлекает ссылки на CSS через <link rel="stylesheet">
  • обрабатывает JavaScript через <script>
  • анализирует изображения, видео и другие ресурсы
  • строит граф зависимостей для дальнейшей оптимизации

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

Построение графа зависимостей

HTML становится корневым узлом графа. Дальнейший процесс выглядит как рекурсивное раскрытие всех импортов:

  1. Парсится HTML
  2. Извлекаются ссылки на ресурсы
  3. Каждый ресурс анализируется как модуль
  4. Если внутри модуля есть импорты — они добавляются в граф
  5. Процесс продолжается до полного обхода дерева зависимостей

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

Подключение JavaScript через HTML

Основной способ подключения JavaScript — использование тега <script>:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Приложение</title>
  </head>
  <body>
    <script src="./src/main.js"></script>
  </body>
</html>

Parcel рассматривает main.js как модуль и анализирует его содержимое. Если внутри используются import, они автоматически включаются в граф сборки.

Важно, что Parcel поддерживает современные стандарты ECMAScript Modules без дополнительной настройки:

import { initApp } from "./app/init.js";

initApp();

HTML и CSS как единая система модулей

CSS подключается напрямую через HTML:

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

Parcel обрабатывает CSS как полноценный модуль. Это означает:

  • поддержка @import
  • обработка препроцессоров (Sass, Less и др.)
  • автоматическое добавление в граф зависимостей

Пример структуры CSS-зависимостей:

@import "./base/reset.css";

body {
  font-family: sans-serif;
}

Parcel развернёт цепочку импортов и объединит их в итоговый бандл с оптимизацией.

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

HTML-ссылки на изображения автоматически включаются в сборку:

<img src="./assets/logo.png" alt="Logo" />

Parcel выполняет следующие действия:

  • копирует файл в output директорию
  • добавляет хеширование имени для кеширования
  • обновляет ссылку в HTML на итоговый путь

Пример преобразования:

logo.png → logo.8f3a1c2d.png

Это позволяет эффективно управлять кешированием без ручной настройки.

Автоматическое переписывание путей

Одной из ключевых особенностей Parcel является переписывание путей к ресурсам. Исходный HTML остаётся читаемым, но в итоговой сборке ссылки заменяются на оптимизированные версии.

Пример:

<img src="./assets/logo.png" />

После сборки:

<img src="/dist/logo.8f3a1c2d.png" />

То же самое происходит со стилями и скриптами.

Несколько точек входа через HTML

Parcel поддерживает многоточечную архитектуру, где каждый HTML-файл может быть отдельной точкой входа:

project/
  src/
    index.html
    admin.html
    about.html

Каждый файл обрабатывается независимо, но при этом может разделять общие зависимости.

Это приводит к следующим эффектам:

  • автоматический code splitting
  • переиспользование общих модулей
  • оптимизация загрузки страниц

Взаимосвязь HTML и JavaScript-модулей

JavaScript, подключённый через HTML, становится частью единого модульного графа. При использовании динамических импортов Parcel дополнительно разделяет код:

button.addEventListener("click", async () => {
  const module = await import("./modal.js");
  module.openModal();
});

Parcel выделяет modal.js в отдельный chunk, который загружается только при необходимости.

Обработка атрибутов HTML как источников зависимостей

Parcel анализирует не только стандартные теги, но и атрибуты, содержащие пути:

  • src
  • href
  • poster
  • data-* (в некоторых сценариях обработки)

Пример:

<video controls poster="./assets/preview.jpg">
  <source src="./assets/video.mp4" type="video/mp4" />
</video>

Каждый ресурс становится частью графа сборки и проходит трансформации.

Dev-сервер и HTML как активная точка обновления

При использовании development режима HTML-файл становится источником для hot reload. Parcel отслеживает изменения:

  • в HTML
  • в подключённых JS модулях
  • в стилях
  • в ассетах

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

HTML в этом контексте выступает как наблюдаемый корень приложения.

Разрешение относительных и абсолютных путей

Parcel различает типы путей:

  • относительные (./, ../) — обрабатываются как локальные модули
  • абсолютные (/assets/...) — могут быть интерпретированы как публичные ресурсы

Пример:

<script src="/global/runtime.js"></script>

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

HTML и система трансформаций Parcel

Каждый ресурс, извлечённый из HTML, проходит через цепочку трансформеров:

  • транспиляция JavaScript
  • компиляция CSS препроцессоров
  • оптимизация изображений
  • минификация
  • добавление хешей

HTML лишь задаёт структуру, но не ограничивает обработку содержимого.

Поведение при отсутствии JavaScript

HTML остаётся полноценной точкой входа даже при минимальном использовании JavaScript. Parcel продолжает обрабатывать:

  • стили
  • изображения
  • шрифты
  • статические файлы

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

Инкрементальная сборка и HTML

При изменении HTML Parcel пересобирает только затронутую часть графа. Если изменение касается:

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

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

Практика организации структуры проекта

HTML-центрированная модель влияет на архитектуру проекта:

  • каждый HTML-файл описывает отдельный экран
  • логика распределяется через импортируемые модули
  • стили группируются по функциональным блокам
  • ассеты привязываются к конкретным страницам

Такая структура упрощает масштабирование и снижает связность компонентов.

Поведение кеширования в HTML-ориентированной сборке

Parcel автоматически внедряет стратегии кеширования:

  • хеши в именах файлов
  • обновление ссылок в HTML
  • разделение стабильных и изменяемых ресурсов

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

Оглавление