Список поддерживаемых фреймворков
Чему вы научитесь
- Познакомитесь с полным списком фреймворков, поддерживаемых функцией Vercel Deploy Agent Skills (45+ типов)
- Понимайте принцип работы обнаружения фреймворков
- Определите, поддерживается ли ваш проект для развертывания одним кликом
- Просмотрите правила приоритета обнаружения фреймворков
Текущие проблемы
Вы хотите использовать функцию развертывания одним кликом Agent Skills, но не уверены, поддерживается ли фреймворк вашего проекта, или хотите понять, как работает логика обнаружения.
Основная идея
Функция Vercel Deploy Agent Skills сканирует файл package.json проекта, проверяя dependencies и devDependencies, последовательно обнаруживая предопределенные имена пакетов характеристик фреймворка для определения используемого фреймворка проекта.
Обнаружение по порядку приоритета: от наиболее конкретного фреймворка к наиболее общему, чтобы избежать ложных срабатываний. Например:
- Обнаружение
next→ соответствует Next.js - Даже если одновременно есть
react, приоритетно распознается как Next.js
Диапазон обнаружения
Обнаружение одновременно проверяет dependencies и devDependencies, поэтому даже если фреймворк установлен только как зависимость для разработки, он будет распознан.
Полный список фреймворков
Экосистема React
| Фреймворк | Обнаружение зависимостей | Возвращаемое значение |
|---|---|---|
| Next.js | next | nextjs |
| Gatsby | gatsby | gatsby |
| Remix | @remix-run/ | remix |
| React Router | @react-router/ | react-router |
| Blitz | blitz | blitzjs |
| Create React App | react-scripts | create-react-app |
| Ionic React | @ionic/react | ionic-react |
| Preact | preact | preact |
Экосистема Vue
| Фреймворк | Обнаружение зависимостей | Возвращаемое значение |
|---|---|---|
| Nuxt | nuxt | nuxtjs |
| VitePress | vitepress | vitepress |
| VuePress | vuepress | vuepress |
| Gridsome | gridsome | gridsome |
Экосистема Svelte
| Фреймворк | Обнаружение зависимостей | Возвращаемое значение |
|---|---|---|
| SvelteKit | @sveltejs/kit | sveltekit-1 |
| Svelte | svelte | svelte |
| Sapper (legacy) | sapper | sapper |
Angular
| Фреймворк | Обнаружение зависимостей | Возвращаемое значение |
|---|---|---|
| Angular | @angular/core | angular |
| Ionic Angular | @ionic/angular | ionic-angular |
Генераторы статических сайтов
| Фреймворк | Обнаружение зависимостей | Возвращаемое значение |
|---|---|---|
| Astro | astro | astro |
| Docusaurus | @docusaurus/core | docusaurus-2 |
| Hexo | hexo | hexo |
| Eleventy | @11ty/eleventy | eleventy |
| RedwoodJS | @redwoodjs/ | redwoodjs |
Фреймворки Node.js Backend
| Фреймворк | Обнаружение зависимостей | Возвращаемое значение |
|---|---|---|
| Express | express | express |
| NestJS | @nestjs/core | nestjs |
| Hono | hono | hono |
| Fastify | fastify | fastify |
| Elysia | elysia | elysia |
| h3 | h3 | h3 |
| Nitro | nitropack | nitro |
Другие фреймворки
| Фреймворк | Обнаружение зависимостей | Возвращаемое значение |
|---|---|---|
| SolidStart | @solidjs/start | solidstart-1 |
| Ember | ember-cli, ember-source | ember |
| Dojo | @dojo/framework | dojo |
| Polymer | @polymer/ | polymer |
| Stencil | @stencil/core | stencil |
| UmiJS | umi | umijs |
| Saber | saber | saber |
| Sanity | sanity, @sanity/ | sanity или sanity-v3 |
| Storybook | @storybook/ | storybook |
| Hydrogen (Shopify) | @shopify/hydrogen | hydrogen |
| TanStack Start | @tanstack/start | tanstack-start |
Инструменты сборки
| Фреймворк | Обнаружение зависимостей | Возвращаемое значение |
|---|---|---|
| Vite | vite | vite |
| Parcel | parcel | parcel |
Статические HTML-проекты
Если ваш проект не имеет package.json (чистый статический веб-сайт), обнаружение фреймворка вернет null.
Скрипт развертывания интеллектуально обработает:
- Автоматическое обнаружение файлов
.htmlв корневом каталоге - Если есть только один файл
.htmlи он неindex.html, он будет автоматически переименован вindex.html - Прямое развертывание как статического сайта на Vercel
Пример сценария:
my-static-site/
└── demo.html # будет автоматически переименован в index.htmlПринципы обнаружения фреймворков
Процесс обнаружения
Чтение package.json
↓
Сканирование dependencies и devDependencies
↓
Сопоставление предопределенных имен пакетов по порядку приоритета
↓
Найдено первое сопоставление → возврат соответствующего идентификатора фреймворка
↓
Сопоставление не найдено → возврат null (статический HTML-проект)Порядок обнаружения
Обнаружение сортируется по специфичности фреймворка, с приоритетным сопоставлением более конкретных фреймворков:
# Пример: проект Next.js
dependencies:
next: ^14.0.0 # сопоставление → nextjs
react: ^18.0.0 # пропускается (уже есть более высокоприоритетное сопоставление)
react-dom: ^18.0.0Частичный порядок обнаружения:
- Next.js, Gatsby, Remix, Blitz (конкретные фреймворки)
- SvelteKit, Nuxt, Astro (мета-фреймворки)
- React, Vue, Svelte (базовые библиотеки)
- Vite, Parcel (общие инструменты сборки)
Правила обнаружения
- Одновременная проверка
dependenciesиdevDependencies - Последовательное сопоставление, возврат при нахождении первого
- Сопоставление имен пакетов: точное сопоставление или сопоставление префикса
- Точное сопоставление:
"next"→ Next.js - Сопоставление префикса:
"@remix-run/"→ Remix
- Точное сопоставление:
# Логика обнаружения shell (упрощенная версия)
has_dep() {
echo "$content" | grep -q "\"$1\""
}
if has_dep "next"; then
echo "nextjs"
fiКак проверить фреймворк вашего проекта
Метод 1: Просмотр package.json
Откройте package.json проекта, найдите имена пакетов в списке выше в dependencies или devDependencies.
{
"dependencies": {
"next": "^14.0.0", ← Next.js
"react": "^18.0.0"
}
}Метод 2: Попробуйте развертывание
Используйте напрямую функцию Vercel Deploy:
Deploy my app to VercelClaude выведет обнаруженный фреймворк:
Detected framework: nextjsМетод 3: Ручной запуск скрипта обнаружения
Если вы хотите протестировать заранее, можно запустить:
bash skills/claude.ai/vercel-deploy-claimable/scripts/deploy.shВыведет обнаруженную информацию о фреймворке (stderr).
На что обратить внимание
Проблема 1: Неточное обнаружение фреймворка
Симптом:
Detected framework: vite
# но вы ожидаете nextjsПричина: обнаружение по порядку приоритета, обнаружение Vite после Next.js, но если в проекте одновременно есть vite и next, может сопоставиться с Vite.
Влияние: обычно не влияет на развертывание, Vercel автоматически определит конфигурацию сборки.
Решение:
- Проверьте зависимости в
package.json - Если не влияет на развертывание, можно игнорировать
- Развертывание все равно будет работать нормально, просто использует другую конфигурацию
Проблема 2: Проекта нет в списке
Симптом: фреймворк вашего проекта отсутствует в списке выше.
Возможные причины:
- Это очень новый или нишевый фреймворк
- Фреймворк использует другое имя пакета
- Скрипт развертывания еще не добавил поддержку
Решение:
- Проверьте, использует ли ваш проект Vite или Parcel и другие общие инструменты сборки
- Попробуйте развертывание, Vercel может автоматически распознать
- Если это статический HTML-проект, просто разверните
- Отправьте PR в agent-skills для добавления поддержки фреймворка
Проблема 3: Мульти-фреймворковый проект
Симптом: проект одновременно использует несколько фреймворков (например, Remix + Storybook).
Поведение обнаружения: возвращает первый сопоставленный фреймворк по приоритету.
Влияние: обычно не влияет на развертывание, основной фреймворк будет правильно распознан.
Распространенные вопросы
Q: Мой фреймворк не в списке, можно ли развернуть?
A: Можно попробовать. Если проект использует Vite или Parcel и другие общие инструменты сборки, они могут быть распознаны как эти инструменты. Vercel также попытается автоматически определить конфигурацию сборки.
Q: Влияет ли ошибка обнаружения на развертывание?
A: Обычно нет. У Vercel есть мощный механизм автоматического обнаружения, даже если идентификатор фреймворка неточен, нормальная сборка и развертывание возможны.
Q: Как добавить поддержку нового фреймворка?
A: Измените функцию detect_framework() в deploy.sh, добавьте новые правила обнаружения, затем отправьте PR в agent-skills.
Q: Нужен ли package.json для статического HTML-проекта?
A: Нет. Чистые статические HTML-проекты (без сборки JavaScript) можно развернуть напрямую, скрипт автоматически обработает.
Итоги урока
Функция Vercel Deploy Agent Skills поддерживает 45+ фреймворков, охватывающих основные технологии фронтенда:
Основная ценность:
- ✅ Широкая поддержка фреймворков, полное покрытие React/Vue/Svelte/Angular
- ✅ Интеллектуальное обнаружение фреймворков, автоматическое определение типа проекта
- ✅ Поддержка статических HTML-проектов, развертывание без зависимостей
- ✅ Открытый исходный код, возможность расширения и добавления новых фреймворков
Принципы обнаружения:
- Сканирование
dependenciesиdevDependenciesвpackage.json - Сопоставление предопределенных имен пакетов характеристик фреймворков по приоритету
- Возврат соответствующего идентификатора фреймворка для использования Vercel
Дальнейшие действия: Просмотрите Учебник по развертыванию в Vercel одним кликом чтобы узнать, как использовать эту функцию.
Приложение: Справочник по исходному коду
Нажмите, чтобы раскрыть расположение исходного кода
Обновлено: 2026-01-25
| Функция | Путь к файлу | Строки |
|---|---|---|
| Логика обнаружения фреймворка | skills/claude.ai/vercel-deploy-claimable/scripts/deploy.sh | 11-156 |
| Точка входа скрипта развертывания | deploy.sh | 1-250 |
| Обработка статического HTML | deploy.sh | 192-205 |
Ключевые функции:
detect_framework(): обнаружение 45+ фреймворков из package.json (строки 11-156)has_dep(): проверка существования зависимости (строки 23-25)
Порядок обнаружения фреймворков (частично):
- Blitz (blitzjs)
- Next.js (nextjs)
- Gatsby (gatsby)
- Remix (remix)
- React Router (react-router)
- TanStack Start (tanstack-start)
- Astro (astro)
- Hydrogen (hydrogen)
- SvelteKit (sveltekit-1)
- Svelte (svelte) ... (полный список см. строки 11-156)
Примеры возвращаемых значений:
- Next.js:
nextjs - Nuxt:
nuxtjs - Статический HTML:
null