Встроенные скрипты и стили

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

Встроенные скрипты и стили не являются «вторичными» элементами: они проходят тот же пайплайн трансформаций, что и отдельные файлы. Это означает поддержку транспиляции, минификации, хеширования и горячей перезагрузки.

Ключевая особенность подхода заключается в том, что Parcel анализирует содержимое, а не только пути. HTML, CSS и JS объединяются в единую систему зависимостей.

Встроенные скрипты в HTML

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

Обычные встроенные скрипты

<script>
  const message = "Parcel";
  console.log(message);
</script>

Такой код рассматривается как модульный блок внутри HTML. Parcel:

  • извлекает содержимое <script>
  • пропускает через трансформации (Babel при необходимости)
  • включает результат в итоговый бандл

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

  • отсутствует явная модульность (нет import/export)
  • сложнее применять code splitting
  • хуже масштабируемость по сравнению с ES-модулями

Поэтому в реальных приложениях встроенный JavaScript чаще используется для небольших инициализационных фрагментов.

Скрипты с type=“module”

<script type="module">
  import { init } from "./app.js";

  init();
</script>

Parcel интерпретирует такой блок как полноценную точку входа модуля.

Поведение:

  • создаётся отдельная ветка графа зависимостей
  • выполняется резолвинг импортов
  • включается tree shaking при production-сборке
  • применяются трансформации для ES-модулей

Важный момент: встроенный module-script не теряет связности с остальным проектом. Он становится равноправным участником графа, как внешний app.js.

Несколько встроенных скриптов в одном HTML

HTML может содержать несколько блоков <script>. Parcel разделяет их на независимые модули, но объединяет в общий runtime при необходимости.

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

Встроенные стили в HTML

Встроенные стили <style> также обрабатываются Parcel как полноценные CSS-модули.

<style>
  body {
    margin: 0;
    font-family: sans-serif;
  }
</style>

Пайплайн обработки

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

  • извлечение содержимого <style>
  • парсинг CSS AST
  • применение постпроцессоров (PostCSS при наличии конфигурации)
  • минификация в production-режиме
  • инъекция результата в <style> или отдельный CSS-бандл

Выбор стратегии зависит от конфигурации сборки и оптимизаций.

Inline CSS и разделение бандлов

В режиме оптимизации Parcel может:

  • вынести стили в отдельный CSS-файл
  • либо оставить их инлайновыми в HTML

Факторы, влияющие на решение:

  • размер стилей
  • стратегия кэширования
  • наличие code splitting
  • тип целевой сборки (SPA, multi-page)

Инлайновые стили уменьшают количество HTTP-запросов, но ухудшают повторное использование кэша.

Импорт стилей в JavaScript

Parcel поддерживает прямой импорт CSS из Jav * aScript:

import "./styles.css";

Такой импорт не возвращает значение, но изменяет граф зависимостей.

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

При обработке такого импорта Parcel:

  • определяет файл как CSS-ресурс
  • прогоняет через CSS-пайплайн
  • подключает результат к JS-бандлу
  • обеспечивает автоматическую инъекцию стилей в DOM

В development-режиме стили обычно вставляются через <style> с возможностью горячего обновления.

CSS как модуль зависимости

CSS в Parcel не является «внешним текстом». Он становится модулем, аналогичным JavaScript-файлу.

Это даёт следующие свойства:

  • отслеживание зависимостей внутри CSS (@import)
  • поддержка препроцессоров (Sass, Less, Stylus)
  • интеграция с PostCSS-плагинами
  • HMR на уровне стилей

CSS Modules и встроенные стили

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

/* styles.module.css */
.button {
  background: black;
  color: white;
}
import styles from "./styles.module.css";

element.className = styles.button;

Parcel:

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

Встроенность здесь проявляется в том, что CSS может быть подключён как зависимость прямо внутри JS, а итоговые стили автоматически синхронизируются с DOM.

Встроенные стили через JavaScript

Parcel не требует ручного создания <style> элементов. При импорте CSS он автоматически:

  • создаёт style-теги
  • управляет их жизненным циклом
  • обновляет их при HMR

Пример поведения в development:

  • изменение CSS-файла
  • Parcel пересобирает модуль
  • обновляется только затронутый <style>
  • состояние приложения не теряется

Встраивание и оптимизация ресурсов

Parcel может трансформировать небольшие ресурсы в data URL и инлайнить их в стили или HTML.

Например:

.icon {
  background: url("./icon.png");
}

Если размер изображения мал, возможна трансформация:

  • icon.png → base64 data URI
  • вставка прямо в CSS

Это уменьшает количество запросов, но увеличивает размер бандла.

Встроенные стили в SVG и HTML-атрибутах

Parcel также обрабатывает встроенные стили в SVG:

<svg>
  <style>
    .shape { fill: red; }
  </style>
</svg>

И inline-атрибуты:

<div style="color: blue;"></div>

Такие конструкции:

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

Inline-атрибуты не участвуют в модульной системе, но учитываются при оптимизации HTML.

Встроенные стили и HMR

Hot Module Replacement в Parcel распространяется и на CSS, включая встроенные стили.

Поведение:

  • изменение CSS мгновенно отражается в браузере
  • JavaScript состояние не сбрасывается
  • обновляется только затронутый модуль стилей

При встроенных <style> блоках Parcel:

  • переопределяет содержимое тега
  • сохраняет структуру DOM
  • избегает полной перезагрузки страницы

Взаимодействие встроенных скриптов и стилей

Встроенные скрипты и стили часто пересекаются в рамках одной HTML-страницы.

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

<style>
  .active { color: green; }
</style>

<script type="module">
  document.querySelector("button")
    .addEventListener("click", () => {
      document.body.classList.toggle("active");
    });
</script>

Parcel:

  • обрабатывает CSS как отдельный модуль
  • обрабатывает JS как ES-модуль
  • сохраняет связь через DOM
  • обеспечивает согласованную сборку без конфликтов

Разделение ответственности внутри бандла

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

  • HTML: структура и точки входа
  • CSS: стилизация и оформление
  • JS: поведение и логика

Parcel не смешивает эти уровни без необходимости, но допускает их объединение при оптимизации (например, инлайнинг критических стилей).

Критические стили и инлайн-стратегии

В production-сборке Parcel может выделять критические стили и помещать их прямо в HTML:

  • ускорение первого рендера
  • уменьшение времени до отображения контента
  • сокращение блокирующих запросов

Остальные стили при этом выносятся в отдельные файлы или загружаются асинхронно.

Особенности отладки встроенных ресурсов

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

  • source maps связывают итоговый код с исходным HTML
  • ошибки указывают на конкретные блоки <script> или <style>
  • модульная структура не теряется даже при инлайне

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

Роль встроенных ресурсов в архитектуре Parcel

Встроенные скрипты и стили не являются исключением из модульной модели, а её расширением. Parcel объединяет:

  • файловые модули
  • встроенные HTML-ресурсы
  • динамические импорты
  • стили, инжектируемые в DOM

Единая система зависимостей делает возможной оптимизацию на уровне всего приложения, а не отдельных файлов.

Оглавление