В архитектуре Parcel трансформация файлов является центральным этапом сборки. Любой входной файл — JavaScript, TypeScript, CSS, HTML, изображение или иной ресурс — рассматривается как asset, который проходит через цепочку преобразований до момента включения в финальный бандл. За преобразование конкретного типа ресурса отвечает механизм трансформеров.
Трансформер в Parcel представляет собой модуль, который принимает исходный файл и возвращает изменённое представление этого файла в формате, пригодном для дальнейшей обработки или включения в граф зависимостей.
Ключевая задача трансформера — обеспечить единообразие входных данных для следующих этапов сборки независимо от исходного формата файла.
Сборка в Parcel строится вокруг последовательного преобразования ассетов:
Трансформация выполняется после того, как файл был идентифицирован и загружен, но до того, как он попал в граф зависимостей в окончательном виде.
Перед запуском трансформеров Parcel определяет тип файла. Это происходит на основе расширения, содержимого и настроек конфигурации.
Тип ассета определяет набор трансформеров, которые будут применены. Например:
.js, .mjs, .cjs → JavaScript
трансформеры.ts, .tsx → TypeScript трансформеры.css → CSS трансформеры.html → HTML трансформерыParcel использует цепочку трансформаций. Один ассет может проходить через несколько трансформеров последовательно.
Каждый трансформер получает на вход:
И возвращает:
Результат одного трансформера становится входом следующего.
Parcel поставляется с набором стандартных трансформеров, охватывающих основные типы ресурсов.
JavaScript трансформер отвечает за:
TypeScript обрабатывается через специализированный трансформер, который:
В процессе часто используются внутренние пакеты вида
@parcel/transformer-babel и
@parcel/transformer-typescript.
CSS трансформеры выполняют:
@importКаждый CSS файл превращается в граф зависимостей, где отдельные импортируемые стили становятся самостоятельными ассетами.
HTML трансформер выполняет:
<script>, <link>,
<img> как зависимостейHTML в Parcel — не просто статический файл, а точка входа графа зависимостей.
Для бинарных ресурсов применяются специализированные трансформеры:
Шрифты проходят через трансформацию, обеспечивающую корректное включение в CSS и оптимизацию доставки.
Parcel позволяет управлять цепочкой трансформаций через файл
конфигурации .parcelrc.
Пример структуры:
{
"extends": "@parcel/config-default",
"transformers": {
"*.svg": ["@parcel/transformer-svg"]
}
}Каждое правило определяет, какие трансформеры применяются к конкретным типам файлов.
Переопределение стандартных цепочек позволяет:
Parcel поддерживает создание собственных трансформеров, что позволяет интегрировать нестандартные форматы и кастомные языки.
Трансформер реализуется как Node.js модуль, экспортирующий функцию обработки ассета.
Базовая структура:
export default function transformer({ asset }) {
const code = asset.getCode();
const transformed = code.replace(/foo/g, "bar");
asset.setCode(transformed);
return [asset];
}Внутри трансформера доступен объект ассета с методами:
Одной из ключевых функций трансформера является возможность объявлять зависимости прямо в процессе обработки.
Пример:
asset.addDependency({
specifier: "./utils.js",
specifierType: "esm"
});Это позволяет динамически строить граф модулей на основе содержимого файла.
Parcel активно использует кэширование результатов трансформации. Каждый трансформированный ассет сохраняется с учётом:
При неизменности входных данных трансформация не повторяется, что значительно ускоряет повторные сборки.
Трансформеры могут генерировать source maps для корректного отображения исходного кода в отладчике.
Source map связывает:
При цепочке трансформеров source maps объединяются в единое отображение, позволяющее отслеживать оригинальный код через несколько уровней преобразований.
Если для одного типа файлов задано несколько трансформеров, Parcel применяет их последовательно.
Пример цепочки:
Каждый этап оперирует уже преобразованным кодом, что позволяет строить сложные пайплайны обработки.
Трансформеры могут изменять поведение в зависимости от:
Контекст передаётся через объект окружения сборки и может использоваться для условной логики внутри трансформера.
При возникновении ошибки трансформации Parcel:
Это позволяет локализовать проблему без остановки всего процесса.
Механизм трансформеров позволяет:
Каждый новый слой обработки становится частью общей графовой модели проекта.
Трансформеры тесно связаны с другими компонентами системы:
Таким образом, трансформер является промежуточным, но критически важным звеном между загрузкой исходников и финальной сборкой.