Начало работы

Обзор

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

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

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

Vite упрям и поставляется с разумными настройками по умолчанию. О возможностях читайте в Руководстве по функциям. Поддержка фреймворков или интеграция с другими инструментами возможна через Плагины. В Разделе конфигурации объясняется, как при необходимости адаптировать Vite к вашему проекту.

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

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

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

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

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

Попробуйте 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

$ bunx create-vite

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

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

# npm 7+, extra double-dash is needed:
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
bunx 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

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 также способен обрабатывать зависимости, которые разрешаются в расположении вне корневой файловой системы, что делает его пригодным для использования даже в установке на основе монорепозитория.

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

Указание альтернативного корня

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

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

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

{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}

Вы можете указать дополнительные параметры CLI, например --port или --open. Чтобы просмотреть полный список параметров CLI, запустите в своем проекте npx vite --help.

Узнайте больше об интерфейсе командной строки

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

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

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # use your preferred package manager for this step

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

Сообщество

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