Точки входа: HTML, JS, TypeScript, CSS

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

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

  • определяет тип ресурса по расширению;
  • выбирает соответствующий трансформер (parser + transformer pipeline);
  • извлекает зависимости;
  • рекурсивно строит граф;
  • оптимизирует результат под целевую среду.

Каждый тип входа влияет на начальную структуру графа, но не ограничивает дальнейшее расширение: HTML может подтягивать JS и CSS, JS — импортировать CSS и TypeScript, CSS — включать другие CSS-файлы и ресурсы.

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

HTML-файл в Parcel выступает как высокоуровневый контейнер приложения. Он не просто копируется в сборку, а анализируется как источник зависимостей.

Механизм обработки HTML

При встрече HTML Parcel:

  • парсит структуру документа;
  • извлекает теги <script>, <link>, <img>, <source>;
  • преобразует ссылки в зависимости графа;
  • связывает ресурсы с соответствующими трансформерами.

Особое значение имеют следующие элементы:

  • <script src="..."> — подключение JavaScript как зависимость;
  • <link rel="stylesheet" href="..."> — подключение CSS как отдельной ветки графа;
  • inline <script> и <style> — становятся частью текущего модуля;
  • атрибуты ресурсов (например, изображения) также участвуют в сборке.

HTML как корень мультиграфа

HTML часто становится точкой входа для сложных приложений, где:

  • один HTML-файл может порождать несколько независимых JS-бандлов;
  • CSS может быть разделён на критический и ленивый;
  • ассеты (шрифты, изображения) привязываются к конкретным узлам.

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

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

Обработка JS entry point

При старте с JS Parcel:

  • анализирует import и export;
  • строит граф ES-модулей;
  • поддерживает CommonJS через трансформацию;
  • подключает динамические импорты.

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

Конструкция import() создаёт отдельные чанки:

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

JS как корень приложения

JS-точка входа часто приводит к структуре:

  • главный бандл приложения;
  • вспомогательные чанки (routes, components);
  • асинхронные модули.

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

TypeScript-файлы поддерживаются нативно через встроенный трансформер.

Принципы обработки TS

Parcel:

  • сначала выполняет транспиляцию TS → JS;
  • затем строит обычный JS-граф;
  • игнорирует типы на этапе runtime;
  • сохраняет совместимость с JS-инструментарием.

Особенности TS entry

TypeScript как точка входа отличается тем, что:

  • может включать строгую типизацию без влияния на сборку;
  • поддерживает пути и алиасы (через tsconfig);
  • позволяет использовать современные JS-фичи без дополнительного Babel-конфига.

Поток обработки

  1. загрузка .ts или .tsx;
  2. трансформация в JavaScript;
  3. анализ импортов;
  4. построение графа аналогично JS.

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

CSS-файлы могут выступать самостоятельными входными точками, особенно в библиотеках стилей или микрофронтендах.

Поведение CSS entry

При использовании CSS как entry:

  • файл становится корневым узлом;
  • все @import включаются в граф;
  • ресурсы (fonts, images) также подтягиваются;
  • формируется отдельный CSS-бандл.

CSS зависимости

Parcel обрабатывает:

  • @import "file.css" — расширение графа;
  • url() — добавление ассетов в сборку;
  • препроцессоры (Sass/Less через плагины).

CSS как самостоятельный продукт

CSS entry часто используется для:

  • дизайн-систем;
  • библиотек компонентов;
  • изолированных стилей без JS-логики.

Мульти-энтри и комбинированные графы

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

Сценарии мульти-энтри

  • несколько HTML страниц (multi-page applications);
  • отдельные JS entry для разных приложений;
  • CSS entry для независимых стилей;
  • комбинированные схемы (HTML + JS + CSS).

Взаимодействие графов

При наличии нескольких entry:

  • общие зависимости извлекаются в shared chunks;
  • дублирование модулей устраняется;
  • оптимизируется загрузка через code splitting.

Приоритеты и разрешение зависимостей

Parcel определяет тип точки входа автоматически, но дальнейшая обработка зависит от контекста:

  • HTML запускает мульти-ресурсный граф;
  • JS формирует логический модульный граф;
  • TS добавляет слой трансформации;
  • CSS строит стилевой подграф.

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

Поведение в dev-сервере

В режиме разработки каждая точка входа:

  • отслеживается через file watcher;
  • пересобирается инкрементально;
  • обновляется через HMR;
  • сохраняет структуру графа без полной пересборки.

HTML entry приводит к перезагрузке документа, JS — к hot replacement модулей, CSS — к инъекции стилей без перезагрузки страницы.

Неявные и явные точки входа

Parcel различает:

  • явные entry — переданные в CLI или API;
  • неявные entry — обнаруженные через HTML или динамические импорты.

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

JS и TS могут порождать новые entry через динамическую загрузку модулей, что влияет на итоговую структуру бандлов.

Влияние расширений на выбор пайплайна

Каждый тип entry активирует собственный pipeline:

  • .html → HTML parser + asset resolver;
  • .js → JS bundler + module graph builder;
  • .ts / .tsx → TS transformer → JS pipeline;
  • .css → CSS parser + dependency resolver.

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

Оглавление