Головна/WordPress Fullstack/Блупринти/Кастомні теми/Інтеграція збирача Vite 6, Tailwind CSS v4 та TypeScript у тему WordPress
До карток розділу «Кастомні теми»
Кастомні теми(ТЗ 21 из 54)
ТЗ: Інтеграція збирача Vite 6, Tailwind CSS v4 та TypeScript у тему WordPress
Кастомні теми5 шагов • +25 XP

ТЗ: Інтеграція збирача Vite 6, Tailwind CSS v4 та TypeScript у тему WordPress

Сучасний конвеєр фронтенд-розробки: миттєвий Hot Module Replacement (HMR) під час розробки, PHP-завантажувач асетів на основі manifest.json від Vite 6, компіляція Tailwind CSS v4 та сувора типізація TypeScript.

~8 ч работыУровень: MiddlePHP 8.3/8.4Vite 6Tailwind CSS v4TypeScriptHot Module Replacement (HMR)dist/.vite/manifest.jsonwp_enqueue_scripts
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~8 рабочих часов
Фриланс вилка~$360 – $600 (€320 – €560)
Оценка веб-студии~$760 – $1,280 (€720 – €1200)

ТЗ заказчика (исходный бриф):

Наш старий збирач на Gulp/Webpack працює надто повільно — збереження CSS оновлюється по 5 секунд. Нам потрібен надшвидкий пайплайн на Vite 6 з Tailwind CSS v4 та TypeScript з підтримкою миттєвого HMR та оптимізованою продакшн-збіркою.
Ключевые требования:
  • •Збірка на Vite 6 з налаштованим проксі для локального середовища WordPress
  • •Tailwind CSS v4 з офіційним плагіном для Vite та конфігурацією на рівні CSS
  • •Конфігурація TypeScript зі строгою типізацією та підтримкою типів WordPress
  • •PHP-клас завантажувача асетів, що парсить manifest.json для хешованих файлів у продакшні та підключає HMR-клієнт у dev-режимі
  • •Продакшн-збірка з мініфікацією та розділенням коду на чанки в каталозі /dist
Ограничения проекта:
  • •Бездоганна робота HMR через HTTPS у локальних середовищах (LocalWP, DDEV, Docker)
  • •Жодних зламаних шляхів до зображень та шрифтів, зазначених у CSS
  • •Виключення node_modules, src та конфігураційних файлів із релізного архіву теми
Критерии приёмки (KPI):
  • Швидкість оновлення HMR < 50мс після зміни файлу
  • Розмір продакшн JS-бандла < 40КБ gzipped
  • Повна автоматизація кеш-бастингу після релізу без ручного очищення

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Крок 1: Ініціалізація npm та встановлення пакетів

~30 минЛегкий

Практическое руководство:

Ініціалізуйте package.json у корені теми. Встановіть vite, @tailwindcss/vite, tailwindcss, typescript та @types/wordpress__blocks як dev-залежності.

План и контрольные точки реализации:
1Создать package.json в корне темы
2Установить vite, tailwindcss, @tailwindcss/vite и typescript
3Настроить tsconfig.json с целевой версией ES2022
4Добавить папки node_modules и dist в .gitignore
Важные технические нюансы и подводные камни:

Переконайтеся, що в package.json налаштовані скрипти dev ('vite') та build ('tsc && vite build').

Совет эксперта (Best Practice):

Используйте pnpm для мгновенной установки зависимостей с жесткими ссылками, экономящими место на диске.

Ожидаемый артефакт этапа:

Готовое npm-окружение с поддержкой Vite 6 и TypeScript.

JSON
// package.json в папке темы wp-content/themes/my-custom-theme/
{
  "name": "agenticlab-custom-theme",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.0.0",
    "tailwindcss": "^4.0.0",
    "typescript": "^5.7.0",
    "vite": "^6.0.0"
  }
}
2
Этап 2 из 5

Крок 2: Конфігурація vite.config.ts із генерацією маніфесту

~40 минСредний
3
Этап 3 из 5

Крок 3: Створення вхідних файлів src/style.css та src/main.ts

~25 минЛегкий
4
Этап 4 из 5

Крок 4: PHP-завантажувач асетів з авто-визначенням Dev / Prod

~50 минСредний
5
Этап 5 из 5

Крок 5: Перевірка HMR та фінальна збірка

~30 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами