Первые шаги

Введение

Vite (французское слово, означающее «быстрый», произносится /vit/, как «вит») — это инструмент сборки, цель которого — обеспечить более быструю и удобную разработку современных веб-проектов. Он состоит из двух основных частей:

• Сервер разработки, обеспечивающий расширенные возможности по сравнению со встроенными ES-модулями, например, чрезвычайно быструю горячую замену модулей (HMR).

• Команда сборки, которая объединяет ваш код с Rollup, предварительно настроенным для вывода высоко оптимизированных статических ресурсов для продакшен-версии.

Vite имеет определённые предпочтения и поставляется с разумными настройками «из коробки». Ознакомьтесь с возможностями в соответствующей главе. Поддержка фреймворков или интеграция с другими инструментами возможна через Плагины. Глава Конфигурация объясняет, как адаптировать Vite под ваш проект, если это необходимо.

Vite также обладает высокой расширяемостью благодаря своим Plugin API и JavaScript API с полной поддержкой типизации.

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

Поддержка браузеров

В режиме разработки Vite использует esnext в качестве целевого формата трансформации, так как мы исходим из того, что используется современный браузер, поддерживающий все последние функции JavaScript и CSS. Это предотвращает понижение синтаксиса, позволяя Vite подавать браузеру модули максимально близко к исходному коду.

Для продакшен-сборки Vite по умолчанию нацеливается на браузеры, поддерживающие встроенные ES-модули, встроенный динамический импорт ESM и import.meta. Устаревшие браузеры могут поддерживаться через официальный @vitejs/plugin-legacy. Дополнительные сведения см. в главе Продакшен-сборка.

Пробуем Vite онлайн

Вы можете попробовать Vite онлайн на сайте StackBlitz. Ваша сборка на основе Vite будет запущена прямо в браузере, поэтому она будет почти идентична локальной, но при этом не потребует установки чего-либо на вашу машину. Вы можете перейти по адресу vite.new/{template}, чтобы выбрать, какой фреймворк использовать.

Поддерживаемые пресеты шаблонов:

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts
solid	solid-ts
qwik	qwik-ts

Создание первого проекта на Vite

Примечание по совместимости

Для работы Vite требуется Node.js версии 18+ или 20+. Однако некоторые шаблоны требуют более высокой версии Node.js для работы. Пожалуйста, обновите их, если ваш менеджер пакетов предупреждает об этом.

NPM

$ npm create vite@latest

Yarn

$ yarn create vite

PNPM

$ pnpm create vite

Bun

$ bun create vite

Затем следуйте подсказкам!

Вы также можете напрямую указать имя проекта и шаблон, который хотите использовать, с помощью дополнительных опций командной строки. Например, чтобы создать проект Vite + Vue, выполните команду:

NPM

# с npm 7+ необходимо дополнительное двойное тире:
$ npm create vite@latest my-vue-app -- --template vue

Yarn

$ yarn create vite my-vue-app --template vue

PNPM

$ pnpm create vite my-vue-app --template vue

Bun

$ bun create vite my-vue-app --template vue

Более подробную информацию о каждом поддерживаемом шаблоне см. в create-vite: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts.

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

Шаблоны сообщества

create-vite — это инструмент для быстрого запуска проекта из базового шаблона для популярных фреймворков. Посмотрите на Awesome Vite шаблоны, поддерживаемые сообществом, которые включают другие инструменты или ориентированы на другие фреймворки.

Если шаблон находится по адресу https://github.com/user/project, вы можете опробовать его онлайн, используя https://github.stackblitz.com/user/project (добавив .stackblitz после github в URL-адресе проекта).

Вы также можете использовать такой инструмент, как degit, чтобы скомпоновать свой проект с одним из шаблонов. Предполагая, что проект находится на GitHub и использует main в качестве ветки по умолчанию, вы можете создать локальную копию, используя следующие команды:

npx degit user/project#main my-project
cd my-project

npm install
npm run dev

Ручная установка

В своем проекте вы можете установить инструмент командной строки vite, используя:

NPM

$ npm install -D vite

Yarn

$ yarn add -D vite

PNPM

$ pnpm add -D vite

Bun

$ bun add -D vite

Затем создайте файл index.html:

<p>Привет, Vite!</p>

И, наконец, запустите соответствующую команду CLI в терминале:

NPM

$ npx vite

Yarn

$ yarn vite

PNPM

$ pnpm vite

Bun

$ bunx vite

index.html будет обслуживаться по адресу http://localhost:5173.

index.html и корень проекта

Вы могли заметить, что в проекте Vite index.html находится в корневой директории, а не спрятан внутри public. Это сделано намеренно: во время разработки Vite является сервером, а index.html — точкой входа в ваше приложение.

Vite рассматривает index.html как исходный код и часть графа модулей. Он разрешает <script type="module" src="...">, который ссылается на ваш исходный код JavaScript. Даже встроенные <script type="module"> и CSS, на которые ссылаются через <link href>, также будут обработаны с помощью Vite. Кроме того, URL-адреса внутри index.html автоматически перестраиваются, поэтому нет необходимости в специальных заглушках вида %PUBLIC_URL%.

Подобно статическим http-серверам, Vite имеет концепцию «корневого каталога», с которого обрабатываются ваши файлы. Во всей остальной документации вы увидите ссылки на него как на <root>. Абсолютные URL-адреса в вашем исходном коде будут разрешаться с использованием корня проекта в качестве базы, поэтому вы можете писать код так, как будто работаете с обычным статическим файловым сервером (только гораздо мощнее!). Vite также способен работать с зависимостями, которые расположены вне корня текущего проекта, что делает его пригодным для использования даже в системе, основанной на монорепозитории (packages/a может ссылаться на packages/b).

Vite также поддерживает многостраничные приложения с несколькими точками входа .html.

Указание альтернативной корневой директории

Запуск vite запускает dev-сервер, используя текущий каталог в качестве корневого. Вы можете указать альтернативную корневую директорию с помощью vite serve some/sub/dir. Обратите внимание, что Vite также разрешит свой файл конфигурации (т. е. vite.config.js) в корне проекта, поэтому вам нужно будет переместить его, если корень будет изменён.

Интерфейс командной строки

В проекте, где установлен Vite, вы можете использовать бинарный файл vite в своих npm-скриптах или запускать его напрямую с помощью npx vite. Вот стандартные скрипты npm в проекте Vite:

{
  "scripts": {
    "dev": "vite", // запуск dev-сервера, псевдонимы: `vite dev`, `vite serve`
    "build": "vite build", // продакшен-сборка
    "preview": "vite preview" // локальный предварительный просмотр продакшен-сборки
  }
}

Вы можете указать дополнительные опции CLI, такие как --port или --open. Для получения полного списка опций CLI выполните команду npx vite --help в вашем проекте.

Подробнее об Интерфейсе командной строки

Использование невыпущенных коммитов

Если вы не можете дождаться нового релиза, чтобы проверить последние возможности, вам нужно клонировать vite repo на локальную машину, а затем собрать и связать его самостоятельно (требуется pnpm):

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # для этого шага используйте предпочтительный менеджер пакетов

Затем перейдите к проекту, основанному на Vite, и запустите pnpm link --global vite (или менеджер пакетов, который вы использовали для глобального объединения vite). Теперь перезапустите dev-сервер, чтобы оказаться на острие атаки!

Сообщество

Если у вас есть вопросы или вам нужна помощь, обращайтесь к сообществу в Discord и в обсуждениях на GitHub.