Установка через npm, yarn и pnpm

Vite требует установленной среды выполнения Node.js, поскольку вся экосистема сборки, dev-сервера и обработки зависимостей основана на Node API. Минимально поддерживаемая версия Node.js обычно определяется текущим релизом Vite, но на практике используется актуальная LTS-ветка, так как именно она гарантирует совместимость с современными пакетами и инструментами экосистемы npm.

Перед установкой важно понимать, что Vite не является классическим глобальным сборщиком. Он не предполагает установку через глобальный npm-пакет для повседневной разработки. Основной сценарий работы — создание проекта через шаблон, после чего Vite используется как локальная зависимость внутри проекта.

Перед началом работы критично убедиться в доступности базовых инструментов:

  • Node.js
  • npm (входит в Node.js)
  • yarn (опционально)
  • pnpm (опционально)

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

node -v
npm -v

При использовании Yarn:

yarn -v

При использовании pnpm:

pnpm -v

Ключевой момент заключается в том, что Vite активно использует современные возможности ES-модулей, поэтому устаревшие версии Node.js приводят к ошибкам на этапе установки или запуска dev-сервера.

Создание проекта через npm

Наиболее распространённый способ установки Vite — использование npm через официальный scaffolding-инструмент create-vite.

Базовая команда:

npm create vite@latest

При выполнении запускается интерактивный процесс, в ходе которого задаются параметры:

  • имя проекта
  • используемый фреймворк (Vanilla, Vue, React, Svelte и др.)
  • вариант языка (JavaScript или TypeScript)

Альтернативный вариант без интерактивного режима:

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

Важно учитывать двойной дефис --, который отделяет аргументы npm от аргументов create-vite.

После генерации структуры проекта выполняется установка зависимостей:

cd my-app
npm install

Запуск dev-сервера:

npm run dev

Внутри создаваемого проекта автоматически формируется стандартный набор:

  • package.json
  • vite.config.js (или ts)
  • index.html
  • папка src
  • конфигурация выбранного шаблона

Установка через Yarn

Yarn поддерживает аналогичный механизм через create-vite. Поведение идентично npm, однако отличается менеджер пакетов и формат lock-файла.

Создание проекта:

yarn create vite

Или с явным указанием шаблона:

yarn create vite my-app --template react

После генерации проекта:

cd my-app
yarn

Запуск dev-сервера:

yarn dev

Особенность Yarn заключается в более агрессивном кэшировании зависимостей и оптимизации установки, что особенно заметно в проектах с большим количеством пакетов.

Установка через pnpm

pnpm является наиболее строгим и эффективным менеджером пакетов с точки зрения дискового пространства и структуры node_modules. Vite полностью совместим с pnpm и часто используется в крупных проектах и монорепозиториях.

Создание проекта:

pnpm create vite

С указанием шаблона:

pnpm create vite my-app --template vue

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

cd my-app
pnpm install

Запуск dev-сервера:

pnpm run dev

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

Сравнение подходов npm, yarn и pnpm при работе с Vite

npm

  • стандартный инструмент Node.js
  • максимальная совместимость
  • более медленная установка в больших проектах
  • отсутствие дополнительных слоёв абстракции

yarn

  • ускоренная установка за счёт кэширования
  • стабильный lock-файл (yarn.lock)
  • предсказуемость зависимостей
  • широко используется в React-экосистеме

pnpm

  • минимальное использование дискового пространства
  • строгая структура зависимостей
  • высокая скорость установки
  • предпочтителен для монорепозиториев

Структура проекта после установки Vite

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

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

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

Установка Vite как локальной зависимости

Хотя основной способ — использование create-vite, Vite может быть установлен напрямую как dev dependency:

npm install -D vite

Аналогично для Yarn:

yarn add -D vite

И для pnpm:

pnpm add -D vite

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

  • index.html
  • src/main.js
  • vite.config.js

И добавление скриптов в package.json:

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

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

Использование npx и временный запуск

Без установки глобальных пакетов возможно использование:

npx create-vite@latest my-app

или

npm exec create-vite@latest my-app

npx загружает пакет временно, выполняет генерацию проекта и не требует глобальной установки create-vite.

Этот подход полезен для одноразовой инициализации проектов или тестирования шаблонов.

Шаблоны проектов при установке Vite

Vite поддерживает набор официальных шаблонов, которые выбираются на этапе создания проекта:

  • vanilla
  • vanilla-ts
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • svelte
  • lit

Пример установки React-шаблона:

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

TypeScript-версия:

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

Шаблоны определяют стартовую конфигурацию сборки, структуру src и подключение плагинов.

Работа с зависимостями после установки

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

Добавление пакета:

npm install axios

или

pnpm add axios

или

yarn add axios

Добавление dev-зависимости:

npm install -D eslint

Vite автоматически отслеживает изменения в node_modules в режиме разработки благодаря ES-модулям и не требует полной пересборки при каждом изменении.

Особенности установки в монорепозиториях

При использовании pnpm или Yarn Workspaces установка Vite может быть частью монорепозитория.

Пример структуры:

repo/
 ├── packages/
 │    ├── app/
 │    └── ui/
 ├── package.json
 └── pnpm-workspace.yaml

Установка Vite внутри пакета:

pnpm --filter app add -D vite

Такой подход позволяет изолировать сборку каждого приложения и управлять версиями зависимостей централизованно.

Типичные проблемы при установке

Несовместимая версия Node.js

Проявляется ошибками при запуске dev-сервера или установке зависимостей. Решение — обновление Node.js до LTS-версии.

Конфликты lock-файлов

При смешивании npm, yarn и pnpm могут возникать конфликты package-lock.json, yarn.lock, pnpm-lock.yaml. Используется только один менеджер пакетов на проект.

Ошибки прав доступа

Часто встречаются при глобальной установке пакетов, хотя Vite не требует глобальной установки.

Роль package.json в процессе установки

Файл package.json является центральной точкой конфигурации:

  • хранит зависимости Vite
  • определяет скрипты запуска
  • управляет версиями шаблонов и плагинов

Минимальный пример после установки:

{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^x.x.x"
  }
}

Принцип локальной установки Vite

Vite всегда устанавливается как локальная dev-зависимость, что обеспечивает:

  • одинаковую версию сборщика у всех разработчиков
  • воспроизводимость сборки
  • отсутствие глобальных конфликтов
  • изоляцию проекта

Локальная установка делает процесс сборки предсказуемым и независимым от окружения системы.

Оглавление