Создание проекта с помощью create-vite

Создание проекта через create-vite начинается с вызова официального CLI-инструмента, который генерирует минимально необходимую структуру приложения с преднастроенной сборкой, dev-сервером и конфигурацией под выбранный стек.

create-vite выступает как генератор каркаса проекта, который выполняет несколько операций:

  • определяет выбранный шаблон (vanilla, react, vue и другие);
  • создаёт структуру каталогов;
  • устанавливает базовые зависимости;
  • формирует стартовые конфигурационные файлы Vite;
  • добавляет скрипты запуска и сборки.

Внутри используется минимальная логика без скрытой магии: итоговый проект остаётся обычным Node.js-приложением с явной конфигурацией.

Способы запуска генератора

Создание проекта выполняется через пакет create-vite, который может быть вызван напрямую через npm-подобные менеджеры пакетов.

npm

npm create vite@latest

pnpm

pnpm create vite

yarn

yarn create vite

Во всех случаях выполняется загрузка последней версии генератора и запуск интерактивного режима выбора параметров.

Интерактивный процесс генерации

После запуска CLI активируется диалог, включающий выбор:

  • имени проекта;
  • используемого фреймворка;
  • варианта языка (JavaScript или TypeScript);
  • дополнительных шаблонов (в зависимости от выбранной технологии).

Типичный набор фреймворков:

  • Vanilla
  • Vue
  • React
  • Preact
  • Lit
  • Svelte
  • Solid

Для большинства фреймворков доступны TypeScript-версии шаблонов.

Прямое указание шаблона

Интерактивный режим можно обойти, передав параметры напрямую.

npm create vite@latest my-app -- --template react

Структура команды:

  • my-app — имя директории проекта;
  • --template — выбор шаблона;
  • react — конкретная реализация.

Пример для TypeScript-версии:

npm create vite@latest my-app -- --template react-ts

Внутренняя структура создаваемого проекта

После генерации формируется стандартный набор файлов:

my-app/
├── index.html
├── package.json
├── vite.config.js
├── src/
│   ├── main.js
│   └── style.css
└── public/

В зависимости от шаблона структура может отличаться, например:

  • Vue использует App.vue;
  • React использует main.jsx или main.tsx;
  • Svelte использует .svelte компоненты.

Значение index.html в Vite

Особенность архитектуры Vite заключается в том, что index.html является частью графа модулей. Он не просто статический файл, а точка входа, через которую подключается приложение.

Пример:

<div id="app"></div>
<script type="module" src="/src/main.js"></script>

Vite обрабатывает этот файл как ESM-ориентированную сущность, что позволяет избежать классического бандлинга на этапе разработки.

Установка зависимостей после генерации

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

npm install

или

pnpm install

или

yarn

В package.json уже содержится минимальный набор команд:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Режим разработки

Запуск dev-сервера осуществляется командой:

npm run dev

Поведение dev-сервера:

  • использование нативных ES Modules;
  • мгновенный старт без предварительного бандлинга;
  • HMR (Hot Module Replacement);
  • кэширование зависимостей через pre-bundling.

Vite использует esbuild для ускоренной обработки зависимостей, что значительно сокращает время старта проекта.

Сборка проекта

Процесс production-сборки запускается командой:

npm run build

На выходе формируется директория dist/, содержащая:

  • оптимизированные JS-модули;
  • CSS-файлы с минификацией;
  • статические ресурсы с хешированием;
  • корректную структуру для деплоя.

Сборка выполняется через Rollup, который отвечает за финальную оптимизацию и tree-shaking.

Предпросмотр сборки

Для проверки результата используется:

npm run preview

Этот режим поднимает локальный сервер, имитирующий production-среду без необходимости разворачивания на внешнем хостинге.

Конфигурационный файл vite.config.js

Файл конфигурации создаётся автоматически и может включать базовую настройку плагинов:

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: []
})

Основные возможности конфигурации:

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

Работа с шаблонами и расширениями

Шаблоны create-vite являются стартовыми конфигурациями без избыточных зависимостей. Их цель — предоставить минимальный, но функциональный фундамент.

Расширение проекта обычно включает:

  • добавление роутера (например, для React или Vue);
  • подключение state management;
  • настройку линтинга;
  • интеграцию тестирования.

Переменные окружения

Vite поддерживает .env файлы:

.env
.env.development
.env.production

Доступ к переменным осуществляется через:

import.meta.env

Особенность системы:

  • только переменные с префиксом VITE_ доступны в клиентском коде;
  • остальные значения доступны только на уровне сборки.

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

Проект, созданный через create-vite, опирается на следующие принципы:

  • отсутствие предварительного бандлинга в dev-режиме;
  • разделение dev и build пайплайнов;
  • нативная работа с ES Modules;
  • минимальная конфигурация по умолчанию;
  • расширяемость через плагины.

Работа с зависимостями и плагинами

Экосистема Vite ориентирована на плагины Rollup и собственную систему расширений.

Типичные плагины:

  • framework plugins (React, Vue, Svelte);
  • plugin legacy для старых браузеров;
  • plugin eslint (через интеграцию);
  • plugin svg для импорта SVG как компонентов.

Установка выполняется стандартно через npm:

npm install @vitejs/plugin-react

и подключение в конфиге:

import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

CLI-параметры create-vite

Дополнительные параметры генератора:

  • --template — выбор шаблона;
  • --force — перезапись директории;
  • --offline — использование локального кэша;
  • --help — вывод справки.

Комбинации позволяют автоматизировать создание проектов в CI/CD сценариях.

Поведение в монорепозиториях

Vite-проекты, созданные через create-vite, могут быть интегрированы в монорепозитории:

  • pnpm workspaces;
  • Turborepo;
  • Nx.

При этом важно учитывать:

  • настройку root-dir;
  • корректные алиасы;
  • совместимость зависимостей.

Типовые ошибки при создании проекта

Наиболее частые проблемы:

  • отсутствие Node.js актуальной версии;
  • конфликт имени проекта с существующей директорией;
  • устаревший npm cache;
  • некорректный выбор шаблона;
  • блокировка установки зависимостей прокси или сетью.

Влияние выбора шаблона на дальнейшую архитектуру

Выбранный шаблон определяет:

  • точку входа приложения;
  • структуру компонентов;
  • систему сборки TypeScript;
  • подключение JSX или SFC;
  • конфигурацию линтера (если добавлен).

Различия между шаблонами минимальны на уровне Vite, но значимы на уровне фреймворка.

Оглавление