Começando

Visão Geral

Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

Um servidor de desenvolvimento que fornece aprimoramentos ricos de recursos sobre os módulos ES nativos , por exemplo , substituição de módulos HOT extremamente rápida (HMR) .
Um comando de compilação que agrupa seu código com Rollup , pré-configurado para produzir ativos estáticos altamente otimizados para produção.

O Vite é opinativo e vem com padrões sensatos da caixa. Leia sobre o que é possível no guia de recursos . O suporte a estruturas ou integração com outras ferramentas é possível através de plugins . A seção Config explica como adaptar o Vite ao seu projeto, se necessário.

O Vite também é altamente extensível por meio da API do plug -in e da API JavaScript com suporte completo de digitação.

Você pode aprender mais sobre a lógica por trás do projeto na seção Why Vite .

Suporte Do Navegador

Durante o desenvolvimento, o Vite Sets esnext como o alvo de transformação , porque assumimos que um navegador moderno é usado e suporta todos os mais recentes recursos JavaScript e CSS. Isso impede a redução da sintaxe, permitindo que o Vite sirva módulos o mais próximo possível do código -fonte original.

Para a construção da produção, por padrão os navegadores de vítimas que suportam JavaScript moderno, como módulos de ES nativos , importação dinâmica de ESM nativa , import.meta , coalescante angustiante e bigint . Os navegadores herdados podem ser suportados pelo oficial @vitejs/plugin-legacy . Consulte o edifício da seção de produção para obter mais detalhes.

Tentando Vite Online

Você pode experimentar o Vite online no Stackblitz . Ele executa a configuração de compilação baseada em vite diretamente no navegador, por isso é quase idêntico à configuração local, mas não requer instalação de nada na sua máquina. Você pode navegar para vite.new/{template} para selecionar qual estrutura usar.

As predefinições de modelo suportadas são:

JavaScript	TypeScript
baunilha	baunilha-ts
Vue	vue-ts
reagir	react-ts
Preact	Preact-ts
iluminado	lit-ts
SVELTE	SVELTE-TS
sólido	Solid-ts
Qwik	Qwik-ts

Andaime Seu Primeiro Projeto De Vite

Compatibility Note

O Vite requer Node.js versão 18+ ou 20+. No entanto, alguns modelos exigem uma versão mais alta do Node.js para funcionar, atualize se o seu gerenciador de pacotes alertar sobre isso.

npmYarnpnpmBun

bash

$ npm create vite@latest

bash

$ yarn create vite

bash

$ pnpm create vite

bash

$ bun create vite

Em seguida, siga os prompts!

Você também pode especificar diretamente o nome do projeto e o modelo que deseja usar através de opções adicionais de linha de comando. Por exemplo, para andaime um projeto Vite + Vue, Run:

npmYarnpnpmBun

bash

# NPM 7+, é necessário dupla dash extra:
$ npm create vite@latest my-vue-app -- --template vue

bash

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

bash

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

bash

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

Consulte Create-Vite para obter mais detalhes sobre cada modelo suportado: vanilla , vanilla-ts , vue , vue-ts , react , react-ts , react-swc , react-swc-ts , preact , 9, preact-ts , lit , lit-ts , svelte , svelte-ts , solid , solid-ts , qwik , qwik-ts

Você pode usar . para o nome do projeto para andaime no diretório atual.

Modelos Comunitários

Create-Vite é uma ferramenta para iniciar rapidamente um projeto de um modelo básico para estruturas populares. Confira modelos impressionantes de vite para a comunidade que incluem outras ferramentas ou segmentam estruturas diferentes.

Para um modelo em https://github.com/user/project , você pode experimentá -lo on -line usando https://github.stackblitz.com/user/project (adicionando .stackblitz após github ao URL do projeto).

Você também pode usar uma ferramenta como o Degit para andaime do seu projeto com um dos modelos. Supondo que o projeto esteja no Github e use main como a filial padrão, você pode criar uma cópia local usando:

bash

npx degit user/project#Principal My-Project
cd my-project

npm install
npm run dev

Instalação Manual

No seu projeto, você pode instalar a CLI vite usando:

npmYarnpnpmBun

bash

$ npm install -D vite

bash

$ yarn add -D vite

bash

$ pnpm add -D vite

bash

$ bun add -D vite

E crie um arquivo index.html como este:

html

<p>Hello Vite!</p>

Em seguida, execute o comando da CLI apropriado em seu terminal:

npmYarnpnpmBun

bash

$ npx vite

bash

$ yarn vite

bash

$ pnpm vite

bash

$ bunx vite

O index.html será servido em http://localhost:5173 .

`index.html` e raiz do projeto

Uma coisa que você deve ter notado é que, em um projeto Vite, index.html é a frente e o centro, em vez de ser escondido dentro de public . Isso é intencional: durante o desenvolvimento, o Vite é um servidor e index.html é o ponto de entrada para o seu aplicativo.

Vite trata index.html como código -fonte e parte do gráfico do módulo. Ele resolve <script type="module" src="..."> que faz referência ao seu código -fonte JavaScript. Mesmo em linha <script type="module"> e CSS mencionados por <link href> também desfrutam de recursos específicos de vite. Além disso, os URLs dentro de index.html são automaticamente reencontrados, para que não haja necessidade de %PUBLIC_URL% espaços reservados especiais.

Semelhante aos servidores HTTP estáticos, o Vite tem o conceito de um "diretório raiz" da qual seus arquivos são servidos. Você o verá referenciado como <root> ao longo do restante dos documentos. Os URLs absolutos no seu código -fonte serão resolvidos usando a raiz do projeto como base, para que você possa escrever código como se estivesse trabalhando com um servidor de arquivo estático normal (exceto muito mais poderoso!). O Vite também é capaz de lidar com dependências que resolvem os locais do sistema de arquivos fora de raízes, o que o torna utilizável mesmo em uma configuração baseada em Monorepo.

O Vite também suporta aplicativos de várias páginas com vários pontos de entrada .html .

Especificando Raiz Alternativa

A execução vite inicia o servidor dev usando o diretório de trabalho atual como root. Você pode especificar uma raiz alternativa com vite serve some/sub/dir . Observe que o Vite também resolverá seu arquivo de configuração (ou seja, vite.config.js ) dentro da raiz do projeto, então você precisará movê -lo se a raiz for alterada.

Interface Da Linha De Comando

Em um projeto em que o Vite é instalado, você pode usar o vite binário em seus scripts NPM ou executá -lo diretamente com npx vite . Aqui estão os scripts NPM padrão em um projeto Vite de andaime:

package.json

json

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

Você pode especificar opções adicionais de CLI, como --port ou --open . Para uma lista completa de opções de CLI, execute npx vite --help em seu projeto.

Saiba mais sobre a interface da linha de comando

Usando Compromissos Não Lançados

Se você não pode esperar que um novo lançamento teste os recursos mais recentes, poderá instalar uma confirmação específica de vite com https://pkg.pr.new:

npmYarnpnpmBun

bash

$ npm install -D https://pkg.pr.new/vite@SHA

bash

$ yarn add -D https://pkg.pr.new/vite@SHA

bash

$ pnpm add -D https://pkg.pr.new/vite@SHA

bash

$ bun add -D https://pkg.pr.new/vite@SHA

Substitua SHA por qualquer um dos shas de compromisso da Vite . Observe que apenas os compromissos no último mês funcionarão, pois os lançamentos de comprometimento mais antigos são purgados.

Como alternativa, você também pode clonar o repositório do Vite para sua máquina local e depois construí -la e vincular você mesmo ( o PNPM é necessário):

bash

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # Use seu gerenciador de pacotes preferido para esta etapa

Em seguida, vá para o seu projeto baseado em vite e execute pnpm link --global vite (ou o gerenciador de pacotes que você usou para vincular vite globalmente). Agora reinicie o servidor de desenvolvimento para andar na borda sangrando!

Dependencies using Vite

Para substituir a versão vite usada pelas dependências transmissíveis, você deve usar substituições de NPM ou substituições de PNPM .

Comunidade

Se você tiver dúvidas ou precisar de ajuda, entre em contato com a comunidade nas discussões Discord e Github .

Começando ​

Visão Geral ​

Suporte Do Navegador ​

Tentando Vite Online ​

Andaime Seu Primeiro Projeto De Vite ​

Modelos Comunitários ​

Instalação Manual ​

index.html e raiz do projeto ​

Especificando Raiz Alternativa ​

Interface Da Linha De Comando ​

Usando Compromissos Não Lançados ​

Comunidade ​

Começando

Visão Geral

Suporte Do Navegador

Tentando Vite Online

Andaime Seu Primeiro Projeto De Vite

Modelos Comunitários

Instalação Manual

`index.html` e raiz do projeto

Especificando Raiz Alternativa

Interface Da Linha De Comando

Usando Compromissos Não Lançados

Comunidade