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

Обзор #

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

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

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

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

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

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

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

Попробуйте Vite онлайн #

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

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

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

С помощью NPM:

$ npm create vite@latest

С помощью Yarn:

$ yarn create vite

С помощью PNPM:

$ pnpm create vite

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

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

# npm 6.x
npm create vite@latest my-vue-app --template 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

Смотрите create-vite для получения более подробной информации о каждом поддерживаемом шаблоне: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts.

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

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

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

npm install
npm run dev

Если проект использует main в качестве ветки по умолчанию, добавьте к репозиторию проекта суффикс #main

npx degit user/project#main my-project

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.

Интерфейс командной строки (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 или --https. Чтобы получить полный список опций 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 # you can use your preferred package manager for this step

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

Сообщество #

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