Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

Vite v4.0.4 lançado em 3 de janeiro de 2023 e aprimora as funcionalidades do ambiente de desenvolvimento Vite e vem apenas cinco meses após o Vite 3. A nova versão vem com novos recursos e atualizações que tornarão a experiência de desenvolvimento em JavaScript mais rápida e forte do que antes.

Aqui, discutiremos o que é o Vite, os recursos e atualizações significativos encontrados no Vite 4.

O que eu vi?

A própria palavra "vite" significa "rápido". É uma ferramenta de construção front-end e um servidor de desenvolvimento projetado para fornecer uma experiência de desenvolvimento mais rápida, leve e simples. Ele atende seu código durante o desenvolvimento, agrupa seus arquivos para produção e permite fácil integração com vários Estruturas e bibliotecas JavaScript, como Vue, React, Preact e Svelte.

vite passou por inúmeras melhorias nos últimos dois anos, e o Vite 4 traz vários recursos novos e aprimorados.

instagram viewer

1. Rollup 3

Rolar é um agrupador de módulos JavaScript que permite aos desenvolvedores agrupar diferentes Módulos JavaScript em um único arquivo. Isso, por sua vez, melhora o desempenho do aplicativo, reduzindo o número de solicitações que o navegador precisa fazer para carregar o código.

Vite agora usa Rollup 3 durante o tempo de construção. A versão 3 do Vite usou o Rollup 2, mas após o lançamento do Rollup 3 em outubro de 2022, a nova versão do Vite veio com uma grande atualização para o Rollup 3.

Você deve consultar o guia de migração do Rollup antes de atualizar para o Rollup 3, pois podem ocorrer problemas, mesmo que o Rollup 3 seja mais compatível com o Rollup 2.

2. Novo plug-in React usando o Speedy Web Compiler (SWC)

SWC é um compilador JavaScript super-rápido escrito em Rust. SWC e babel são ambos compiladores JavaScript que transformam seu código para o que é suportado pelos navegadores, mas o SWC afirmou ser mais rápido que o Babel.

Como o Vite v3 usava o Babel, o v4 vem com a introdução do SWC como substituto ou alternativa, especialmente para projetos React.

Enquanto o Vite continua a oferecer suporte ao Babel, o Vite 4 apresenta dois plugins (vitejs/plugin-react e vitejs/plugin-react-swc) com diferentes compensações para projetos React.

O plug-in vitejs/plugin-react

Este plug-in fornece substituição rápida de módulo quente enquanto usa tamanho mínimo de pacote, usando esbuild e Babel. Ele também oferece a flexibilidade adicional de poder usar o pipeline de transformação Babel.

A substituição do módulo quente permite a atualização completa. Ele permite que os desenvolvedores atualizem os módulos em um aplicativo em execução sem precisar atualizar a página inteira. Siga a demonstração abaixo para instalar o plugin em seu projeto.

npm install @vitejs/plugin-react

Siga o código abaixo para importar o plugin para o seu projeto;

importar { defineConfig } de'vite'
importar reagir de'@vitejs/plugin-react'
exportarpadrão defineConfig({
plugins: [reagir()],
})

O plug-in vitejs/plugin-react-swc

Este é um novo plugin que faz uso de esbuild durante a compilação e Speed ​​Web Compiler durante o desenvolvimento.

Ao substituir o Babel pelo SWC, o plug-in visa acelerar significativamente o processo de desenvolvimento, principalmente para projetos que não requerem extensões React não padrão.

Aqui está como instalar o plugin;

npm i @vitejs/plugin-react-swc

Importe-o para o seu projeto da seguinte maneira;

importar { defineConfig } de"vite";
importar reagir de"@vitejs/plugin-react-swc";
exportarpadrão defineConfig({
plugins: [reagir()],
});

3. Importando CSS como uma String

Este recurso fornece uma solução para o comportamento de carregamento duplo do Vite 3 CSS que ocorre ao importar a exportação padrão de um arquivo CSS, por exemplo:

importar cssString de'./global.css

Para evitar esse comportamento, o Vite 4 apresenta o uso do modificador de sufixo de consulta em linha. Aqui está uma demonstração da sintaxe;

importar cssString de'./global.css? em linha'

A exportação padrão CSS v3 foi, portanto, obsoleta.

4. variáveis ​​ambientais

Vite atualizou suas dependências em dotenv e dotenv-expand. As novas versões em uso são dotenv 16 e dotenv-expand 9, respectivamente. Esta atualização exigirá que você coloque os valores que incluem os caracteres "#" ou "`" entre aspas para garantir a funcionalidade adequada. Aqui está um exemplo;

SECRET_HASH="algo-com-a-#-cerquilha"

Para facilitar o processo de atualização de arquivos ENV, Vite recomendou o uso da interface de linha de comando dotenv. Este é um plug-in opcional que pode ajudar a garantir que os arquivos ENV sejam consistentes em diferentes máquinas, ambientes ou membros da equipe. Isso pode ajudar a tornar o processo de atualização de arquivos ENV menos tedioso.

Outras atualizações, correções e migração para o Vite v4.0.4

Vite adicionou mais atalhos de interface de linha de comando. Para ver uma lista de todos os atalhos, pressione h durante o desenvolvimento.

A construção do navegador moderno agora também tem como alvo o safari14 por padrão para uma compatibilidade ES2020 mais ampla. Há suporte para patch-package ao pré-empacotar dependências, há mensagens de erro aprimoradas durante o SSR e muito mais.