Vue 3: @parcel/transformer-vue

Интеграция Vue 3 в Parcel реализуется через трансформер @parcel/transformer-vue, который обеспечивает обработку .vue файлов на этапе сборки. Поддерживаются Single File Components (SFC), включающие <template>, <script> и <style>, а также современные возможности Vue 3, включая Composition API и <script setup>.

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

Установка зависимостей

Основной пакет трансформации подключается вместе с Vue и компилятором SFC:

npm install vue
npm install -D @parcel/transformer-vue @vue/compiler-sfc

Parcel автоматически подключает трансформеры через конфигурацию .parcelrc, однако наличие @vue/compiler-sfc обязательно, так как именно он выполняет разбор Vue SFC.

Конфигурация Parcel для Vue

Parcel использует файл .parcelrc для определения пайплайна трансформации:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.vue": ["@parcel/transformer-vue"]
  }
}

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

Обработка Vue 3 Single File Components

Vue SFC проходит несколько этапов трансформации:

  1. Разбор .vue файла через @vue/compiler-sfc

  2. Разделение на блоки:

    • template
    • script
    • style

  3. Компиляция шаблона в render-функцию

  4. Объединение результата в JavaScript-модуль

Пример SFC:

<template>
  <div class="counter">{{ count }}</div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<style scoped>
.counter {
  font-size: 20px;
}
</style>

После обработки Parcel генерирует модуль, где шаблон преобразован в render-функцию, а логика script setup становится частью исполняемого кода.

Script Setup и Composition API

Поддержка <script setup> реализуется через Vue compiler без дополнительной конфигурации. Parcel передает содержимое блока в @vue/compiler-sfc, который выполняет десугаринг:

  • переменные становятся частью setup-функции
  • импорты остаются в модульной области
  • реактивные примитивы (ref, reactive) сохраняют поведение Vue 3 runtime

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

<script setup>
import { computed } from 'vue'

const value = computed(() => 42)
</script>

После компиляции формируется эквивалент setup-функции, интегрированной в компонент.

Обработка шаблонов

Template-блок компилируется в render-функцию с использованием оптимизаций Vue 3:

  • hoisting статических узлов
  • оптимизация патч-флагов
  • инлайн выражений
  • tree-shaking неиспользуемых частей

Parcel не выполняет самостоятельную трансформацию шаблонов, а делегирует её Vue compiler, выступая как оркестратор пайплайна.

Работа со стилями

CSS внутри .vue файлов обрабатывается Parcel как отдельный pipeline:

  • поддержка scoped через атрибуты data-xxx
  • извлечение CSS в отдельные чанки
  • поддержка препроцессоров (Sass, Less) через соответствующие трансформеры Parcel

Пример scoped-стилей:

<style scoped>
.button {
  background: blue;
}
</style>

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

TypeScript в Vue компонентах

Поддержка TypeScript реализуется через комбинацию трансформеров Parcel и Vue compiler:

<script setup lang="ts">
import { ref } from 'vue'

const count = ref<number>(0)
</script>

При использовании lang="ts":

  • Parcel передает код в TypeScript transformer
  • Vue compiler сохраняет типовую аннотацию
  • итоговый JavaScript очищается от типов на этапе трансформации

Hot Module Replacement (HMR)

Parcel обеспечивает HMR для Vue компонентов без дополнительной настройки.

Механизм обновления:

  • отслеживание изменений .vue файлов
  • пересборка только измененного блока (template/script/style)
  • сохранение состояния компонента при возможном hot-update boundary

Особенности поведения:

  • изменение template обновляет render-функцию
  • изменение script может вызвать пересоздание компонента
  • изменение style обновляет CSS без перезагрузки логики

Сборка для production

При production-сборке Parcel активирует оптимизации:

  • minification JS через встроенный minifier
  • удаление dev-only блоков
  • tree-shaking Vue runtime helpers
  • разделение кода (code splitting) на уровне компонентов

Компоненты Vue становятся отдельными чанками при динамическом импорте:

const AsyncComponent = () => import('./MyComponent.vue')

Parcel автоматически выделяет отдельный bundle для такого компонента.

Поведение resolver и трансформеров

Parcel использует resolver для обработки импортов внутри Vue файлов:

  • import в <script setup> разрешается через стандартный resolver Parcel
  • алиасы поддерживаются через .parcelrc или package.json
  • пути к .vue модулям резолвятся как ES modules

Пример алиасов:

{
  "@parcel/resolver-default": {
    "alias": {
      "@components": "./src/components"
    }
  }
}

Частые ошибки при интеграции

Некоторые сценарии требуют точной конфигурации пайплайна:

Отсутствие @vue/compiler-sfc

Ошибка возникает при попытке компиляции SFC без установленного компилятора Vue.

Конфликт версий Vue

Vue 3 требует @vue/compiler-sfc@^3.x. Несовместимость с Vue 2 приводит к ошибкам парсинга template.

Неправильный .parcelrc

Отсутствие transformer для .vue приводит к восприятию файла как обычного текста.

Проблемы с scoped styles

При отсутствии корректной обработки CSS возможно дублирование стилей между компонентами.

Взаимодействие с экосистемой Parcel

Vue transformer интегрируется в общий pipeline Parcel:

  • Resolver → определяет .vue файл
  • Transformer → @parcel/transformer-vue
  • Vue compiler → преобразует SFC
  • JS/CSS pipeline → финальная обработка
  • Bundler → сборка графа зависимостей

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

Оглавление