Retrocompatibilidade no front-end utilizando o Vite

Published in

orangejuicetech

6 min readJan 18, 2023

**O que é “Vite”? —** Vite | Next Generation Frontend Tooling (vitejs.dev)

Em uma tradução livre:

Vite (palavra francesa para “rápido”, pronunciado /vit/, como “veet”) é uma ferramenta de construção que visa fornecer uma experiência de desenvolvimento mais rápida e enxuta para projetos web modernos.
É composto por duas partes principais: Um servidor de desenvolvimento que fornece aprimoramentos de recursos avançados em módulos ES nativos… e um comando de compilação que agrupa seu código… para produzir ativos estáticos altamente otimizados para produção.
O Vite… vem com padrões prontos para uso, mas também é altamente extensível por meio de sua API de plug-in e API de JavaScript…

Resumidamente, o vite é uma ferramenta que oferece um ambiente de desenvolvimento front-end robusto, diminuindo o tempo gasto com configuração de ambientes de desenvolvimento e servidores web.

**Iniciando uma aplicação Vite.**

Nota de compatibilidade: O Vite necessita do Node.js versão na versão 16+. No entanto, alguns modelos podem requerer uma versão ainda superior do Node.js para funcionar, atualize se o seu gerenciador para a versão lts atual se deseja realizar o passo a passo desse artigo.

Para iniciar uma versão do vite, podemos usar o NPM, Yarn ou PNPM. Nesse artigo eu utilizo o NPM pois é o gerenciador de pacotes padrão do node e o que a maioria das pessoas iniciantes costumam utilizar. A sequência de comandos para Yarn ou PNPM você encontra em: Getting Started | Vite (vitejs.dev)

Para iniciar um projeto com o vite, basta acessar o seu diretório de projetos e executar o comando:

npm create vite@latest

Leia as opções com cuidado e responda de acordo com sua necessidade, nesse artigo vamos utilizar as configurações padrões do vite (nome do projeto: vite-project), sem utilizar frameworks (Vanilla) e em JavaScript. Porém, é possível utilizar o vite com frameworks como Vue e React com ou sem TypeScript . Após iniciar o projeto, o próprio vite orienta o usuário aos próximos passos:

Done. Now run:

cd vite-project
npm install
npm run dev

Execute os comando na sequência, e o vite irá baixar as dependências mínimas necessárias para iniciar seu ambiente de desenvolvimento, incluindo um servidor http com atualização em tempo real. No meu caso o servidor foi iniciado em localhost:5174/ mas a porta pode mudar. Abra o navegador e acesse o endereço, uma pequena aplicação já estará rodando nesse servidor conforme a Figura 001.

Ao verificar a pasta do projeto, você encontrará uma estrutura semelhante a Figura 002, o vite já iniciou alguns arquivos interessantes como .gitignore, packjage.json, index.html, etc…

Fig. 002 — Arquivos e pastas iniciais criadas pelo vite.

A partir desse ponto você pode editar, excluir ou adicionar arquivos e dependências de acordo com a necessidade do projeto e utilizar o comando “npm run dev” para iniciar o servidor e visualização o projeto. Tudo simples e prático.

Nem tudo são flores — O mínimo que um navegador deve suportar para rodar aplicações iniciadas com o vite.

Assim como todas as aplicações, o vite possui dependências mínimas para ser executado satisfatóriamente. O mínimo que um navegador deve suportar são native ES Modules (JavaScript modules via script tag | Can I use… Support tables for HTML5, CSS3, etc) , native ESM dynamic import (JavaScript modules: dynamic import() | Can I use… Support tables for HTML5, CSS3, etc), e import.meta (JavaScript operator: `import.meta` | Can I use… Support tables for HTML5, CSS3, etc).

Note que a versão 53 do Google Chrome (muito utilizadas em TVs, por exemplo) não suporta nenhuma dessas tecnologias, e tentar abrir a aplicação com um navegador nessa versão não produzirá nada, conforme a Figura 003. Não se desespere, o vite tem a solução através de plugins (Using Plugins | Vite (vitejs.dev))

Fig. 003 — Aplicação acessada por versão não suportado do Google Chrome.

Plugins do vite.

O Vite pode ser estendido usando plug-ins. Isso significa que os usuários podem estender as funcionalidade do servidor de desenvolvimento conforme necessário. Para usar um plug-in, ele precisa ser adicionado ao devDependencies do projeto e incluído na matriz de plug-ins no arquivo de configuração vite.config.js. Na próxima seção iremos adicionar um plugin capaz de fornecer compatibilidade com versões mais antigas de navegadores, mas você pode obter uma lista completa dos plugins oficiais em Plugins | Vite (vitejs.dev) e a lista dos plugins produzidos pela comunidade em vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js (github.com).

Adicionando plugins — @vitejs/plugin-legacy (vite/packages/plugin-legacy at main · vitejs/vite (github.com))

Para adicionar qualquer plugin oficial do vite, precisamos adicionar a dependência desse plugin ao nosso projeto:

npm add -D @vitejs/plugin-legacy

Crie um arquivo denominado vite.config.js e adicione o seguinte conteúdo:

import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['chrome 53'],
    }),
  ],
})

Por enquanto colocamos target como “chrome 53” porém podemos adicionar mais de um alvo, como IE11, Firefox ou até mesmo “os 99,5% dos navegadores mais utilizados”. A lista completa você encontra em browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env (github.com).

Executando a aplicação no Chrome 53.

Para que o plugin consiga realizar as alterações necessárias no nosso projeto, precisamos realizar o build da aplicação e só então iniciar nosso servidor a partir da pasta gerada com os arquivos modificados. Felizmente isso pode ser feito com uma única linha de comando:

npm run build && npm run preview

Note conforme a Figura 004 que o vite irá criar e alterar os arquivos necessários automaticamente e, ao fim, iniciará o servidor de desenvolvimento.

Fig. 004 — Processo de adequação do projeto para a versão 53 do Google Chrome.

Agora, ao inicar a aplicação em localhost:4173 teremos uma imagem bem diferente da Figura 003. Note conforme a Figura 005 que ouve uma pequena mudança no botão “count is 0”. Isso ocorre pois algumas propriedades CSS mais atuais não são reconhecidas por navegadores mais antigos. Infelizmente essas alterações ainda devem ser realizadas manualmente e você pode procurar se uma propriedade é suportada ou não em Can I use… Support tables for HTML5, CSS3, etc. Porém o botão é funcional e a contagem de click é feita normalmente.

Figura 005 — Aplicação rodando na versão 53 do Google Chrome!

Como os navegadores se preocupam em manter uma retrocompatibilidade, a aplicação roda perfeitamente em versões atuais. A Figura 006 compara a aplicação em duas versões diferentes do mesmo navegador. As diferenças de cores e posicionamentos são geradas justamente pelas propriedades CSS não suportadas. A diferença de tempo entre o lançamentos das duas versões é de 7 anos!

Fig. 006 — Comparação entre versões. A esquerda temos versão atual e a direita a versão 53 do Google Chrome.

Considerações finais

O vite oferece um ambiente de desenvolvimento front-end robusto, capaz de aumentar suas capacidades através de plugins.

O plugin-legacy permite adaptar aplicações para diferentes navegadores e versões com pouco ou nenhum trabalho adicional.

É possível utilizar o plugin-legacy para mais de um navegador ou várias versões de um navegador como os 99,5% dos navegadores mais utilizados ou as ultimas duas versões de um determinado navegador.

Caso o tempo entre versões seja muito grande (no exemplo do arquivo essa diferença é de 7 anos), é importante conferir se as propriedades e seletores CSS utilizados são suportadas por todas elas, adaptando-as sempre que necessário.

— -

Tem contribuições com esse artigo? Não deixe de entrar em contato comigo para que possamos melhora-lo.

Lucas Pereira | LinkedIn