Vuetify, do Webpack ao Vite

Dec 08 2022

Um guia passo a passo sobre como migrar seu projeto Vue2 com Vuetify do Webpack para o Vite

Eu tenho muitos projetos legados escritos em Vue2. E qual biblioteca de estilos eu uso? Vuetify é claro.

Este artigo foi criado para ajudá-lo a aproveitar o poder do Vite. Porque, mesmo se você tiver um código legado, você merece tempos de desenvolvimento rápidos.

Se você não precisa oferecer suporte a navegadores mais antigos. Se você deseja acelerar suas compilações de desenvolvimento. Se você deseja uma experiência geral melhor. Você pode querer dar uma olhada em Vite.

O Vite possui funcionalidades semelhantes ao Webpack. Ele agrupa e compila seu código de componentes de arquivo único e Typescript para JavaScript básico.

Se faz o mesmo, por que eu iria querer usá-lo?

Simples. Os fardos produzidos pela Vite são menores. Na prática isso significa 2 coisas:

Velocidade de desenvolvimento mais rápida. Como tem que produzir menos código, transpila mais rápido.
Velocidade de carregamento do navegador mais rápida. Pacotes menores carregam mais rápido.

Isenção de responsabilidade

Antes de mergulharmos em Vite. Você precisa saber que ele NÃO suporta navegadores mais antigos.

Removendo Babel

Em seu package.json , remova tudo relacionado ao babel da seguinte forma:

"@babel/core": "...",
"@babel/eslint-parser": "...",
"@vue/cli-plugin-babel": "...",

Feito isso, vamos remover as bibliotecas relacionadas ao Webpack.

Removendo Webpack

Em seu package.json, remova:

"@vue/cli-plugin-eslint": "...",
"@vue/cli-plugin-router": "...",
"@vue/cli-plugin-unit-jest": "...",
"@vue/cli-plugin-vuex": "...",
"@vue/cli-service": "...",

Webpack e Babel removidos. Agora. Vamos adicionar Vite.

Adicionando Vite

Instale vitee vite-plugin-vue2executando:

npm install -D vite vite-plugin-vue2

Reorganizando os arquivos

Vite é um pouco opinativo com a estrutura dos arquivos do nosso projeto. Teremos que mudar os diretórios de nossos arquivos estáticos.

Tudo o que estava na pasta pública, leve para o diretório raiz.

Esse “tudo” a que me refiro geralmente é:

index.html
favicon.ico

Alterações no arquivo index.html

Se você abrir seu index.html , encontrará algo assim:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Em outras palavras. Tudo com <%...%>necessidades para ir.

Feito isso, devemos ter algo assim:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="./favicon.ico" />
    <title>Admin</title>
    <script type="module" src="/src/main.js" defer></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but the admin doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<script type="module" src="/src/main.js" defer></script>

Adicionando as configurações do Vite

Da mesma forma que adicionamos configurações ao Webpack, precisamos fazer isso com o Vite.

Um arquivo de configuração simples:

import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
import path from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Primeiro. Importamos as dependências que precisamos.

import { defineConfig } from "vite"

import { createVuePlugin as vue } from "vite-plugin-vue2";

import path from "path";

Agora vamos para as coisas difíceis.

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(path.dirname(''), "./src"),
    },
  },
});

plugins: [vue()],

resolve: {
  alias: {
    "@": path.resolve(path.dirname(''), "./src"),
  },
},

Adicionar scripts do Vite

Também precisamos atualizar nossos scripts. A partir disso:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
},

Nossa configuração até agora não funcionará com o Vuetify. Precisamos de alguns ajustes especiais para fazer isso.

Etapa adicional

De agora em diante. Sempre que importamos um componente de arquivo único (SFC), você precisa incluir a extensão.

Quando antes podíamos fazer isso:

import HelloWorld from '@/components/HelloWorld';

import HelloWorld from '@/components/HelloWorld.vue';

Para que o Eslint funcione corretamente com o Vite, precisamos ajustar algumas configurações. Se você não o usa, sinta-se à vontade para pular esta seção.