Introdução ao Vite: a melhor ferramenta de construção

À medida que os aplicativos da Web se tornam mais ricos em recursos, a demanda por ferramentas de construção rápidas e eficientes continua a crescer.

O Vite é uma ferramenta de construção moderna que fornece um servidor de desenvolvimento ultrarrápido e um processo de construção otimizado, permitindo que os usuários simplifiquem seu fluxo de trabalho e melhorem a experiência do usuário final.

Você explorará como começar com o Vite, abrangendo seu processo de instalação, recursos essenciais e comandos da interface de linha de comando (CLI).

Inicializar um Projeto Vite

Antes que você possa usar vite, você deve instalar Node.js e Node Package Manager em seu sistema. Depois de instalar esses dois pacotes, você pode criar um projeto com o Vite.

Aqui está como inicializar um projeto com Vite usando npm:

npm init vite

Quando você executa este comando, ele cria um novo projeto Vite em seu diretório de trabalho atual. O comando solicita que você faça escolhas de configuração fundamentais para configurar seu novo projeto Vite.

Aqui está um detalhamento das opções que o comando solicita que você selecione:

1. Nome do Projeto. Quando você executa o comando, ele solicita que você forneça um nome para seu novo projeto. O nome que você fornecer também aparecerá no pacote.json arquivo e servir como o nome do diretório do seu projeto.
2. Escolha uma Estrutura. Este prompt solicitará que você escolha uma estrutura para o seu projeto. Atualmente, o Vite oferece suporte a estruturas de front-end populares como React, Vue, Angular e uma opção Vanilla para código JavaScript simples.
3. Escolha uma variante. Isso solicita que você escolha uma variante para seu projeto, abrangendo alternativas como JavaScript e sua linguagem de subconjunto TypeScript.

Depois de fornecer as informações necessárias, o Vite gerará uma nova estrutura de projeto em seu diretório de trabalho atual. A estrutura representará uma configuração básica do projeto, incluindo uma pacote.json arquivo, um origem diretório com um index.html e main.js arquivo e um público diretório.

Depois de criar a estrutura do projeto, você pode navegar até o diretório do projeto executando cd . Depois de fazer isso, instale quaisquer dependências adicionais que seu projeto possa exigir usando o npm instalar comando.

Para iniciar um servidor de desenvolvimento e monitorar quaisquer alterações feitas em seu projeto, você executará o npm run dev comando dentro do terminal do seu projeto.

Características do Vite

Os recursos do Vite concentram-se em simplificar o processo de construção e aprimorar a experiência de construção na web.

Servidor de Desenvolvimento Rápido

O servidor de desenvolvimento do Vite utiliza módulos ES nativos e carregamento lento de módulos, permitindo uma velocidade incrível. Isso permite loops de feedback rápidos e tempos de inicialização extremamente rápidos.

Processo de construção otimizado

A Vite aprimorou seu procedimento de compilação para produzir código minificado, otimizado e pronto para produção. Além disso, ele cria um arquivo de manifesto que pode armazenar em cache os recursos de falha e versão.

Suporte para vários frameworks front-end

O Vite oferece suporte a vários frameworks de front-end, incluindo Vue e frameworks semelhantes como React Js e Angular Js. Isso permite que os desenvolvedores escolham sua estrutura preferida e aproveitem os poderosos recursos do Vite.

Substituição de módulo quente (HMR)

O recurso Hot Module Replacement (HMR) do Vite permite atualizações rápidas e contínuas do aplicativo sem exigir uma atualização completa da página. Isso torna o processo de desenvolvimento mais rápido e eficiente.

Pré-processamento CSS e integração pós-CSS

Vite suporta pré-processamento de CSS, incluindo Sass, Less e Stylus. Ele também se integra ao PostCSS, permitindo transformações e otimizações adicionais ao CSS.

O Vite vem com muitos outros recursos, incluindo suporte para TypeScript, JSX e WebAssembly. Com o lançamento do Vite v4.0.4, a comunidade de desenvolvedores do Vite cresceu e tem mantido o software ativamente, adicionando novos recursos regularmente.

Interface de linha de comando (CLI) do Vite

A interface de linha de comando (CLI) do Vite é uma ferramenta útil para personalizar o comportamento do Vite. Ele fornece uma variedade de comandos essenciais que também ajudam a simplificar o processo de desenvolvimento. Aqui estão alguns dos comandos CLI cruciais:

construir vite

Esse comando criará o aplicativo para um ambiente de produção, otimizando e reduzindo o código para que esteja pronto para implantação. Usando esse comando, você pode garantir que seu aplicativo seja o mais rápido e eficaz possível e esteja pronto para distribuição aos usuários.

vite preview

Este comando permite visualizar o código gerado antes de implantá-lo na produção. Se você deseja garantir que tudo pareça e funcione conforme o esperado e que não haja problemas aparentes ou problemas que exijam atenção, este é um comando útil para executar.

vite otimizar

vite otimizar está disponível no Vite 2.6 e versões posteriores que analisam o código do projeto e geram compilações de produção otimizadas executando a árvore agitação, operações de divisão de código e incorporação de pequenos ativos diretamente na compilação final para reduzir as solicitações necessárias para carregar o aplicativo.

vite otimizar é executado automaticamente durante o construir vite comando, que gera compilações de produção otimizadas. Você também pode executá-lo separadamente para verificar o tamanho e o desempenho da compilação

Arquivo de configuração do Vite

No Vite, o arquivo de configuração define várias opções para o processo de compilação. O arquivo de configuração do Vite usa JavaScript e a sintaxe dos módulos ES6.

Por padrão, você deve nomear seu arquivo de configuração vite.config.js e coloque-o no diretório raiz do projeto.

Aqui estão algumas das opções mais usadas no arquivo de configuração do Vite:

• raiz. Especifica o diretório raiz do projeto.
• servidor. Configura o servidor de desenvolvimento. Ele inclui opções para configurar as solicitações de host, porta e proxy para um back-end de API.
• plugins. Permite adicionar plugins ao processo de construção do Vite. Um plug-in é uma função que modifica o processo de compilação de alguma forma, como adicionar suporte para um novo formato de arquivo ou transformar o código-fonte.
• resolver. Isso configura como o Vite resolve as importações no projeto. Inclui opções para especificar aliases, extensões e diretórios de módulos.

Aqui está um exemplo de um arquivo de configuração do Vite:

importar { defineConfig } de'vite';
importar caminho de'caminho';
exportarpadrão defineConfig({
 servidor: {
 porta: 3000,
 abrir: verdadeiro,
 },
 resolver: {
 apelido: {
'@': path.resolve (__dirname, './src'),
 },
 },
 plug-ins: [],
});

Este arquivo de configuração configura um projeto Vite básico com:

• um servidor de desenvolvimento local rodando na porta 3000
• um pseudônimo para o origem diretório
• sem plugins

Vite tem uma comunidade forte

Vários recursos online explicam em detalhes como usar o Vite com estruturas populares como React, Vue e Angular.

Além disso, há muitas informações sobre o uso eficaz do Vite em sua documentação oficial. Com esses recursos disponíveis, é possível integrar o Vite ao seu próximo projeto.