Vuetify, von Webpack bis Vite

Dec 08 2022

Eine Schritt-für-Schritt-Anleitung zur Migration Ihres Vue2 mit Vuetify-Projekts von Webpack zu Vite

Ich habe viele Legacy-Projekte in Vue2 geschrieben. Und welche Stilbibliothek verwende ich? Vuetify natürlich.

Dieser Artikel soll Ihnen helfen, die Leistungsfähigkeit von Vite zu nutzen. Denn selbst wenn Sie Legacy-Code haben, verdienen Sie schnelle Entwicklungszeiten.

Wenn Sie ältere Browser nicht unterstützen müssen. Wenn Sie Ihre Entwicklungs-Builds beschleunigen möchten. Wenn Sie eine insgesamt bessere Erfahrung wünschen. Vielleicht möchten Sie einen Blick auf Vite werfen.

Vite hat ähnliche Funktionalitäten wie Webpack. Es bündelt und kompiliert Ihren Code von Single File Components und Typescript bis hin zu Vanilla JavaScript.

Wenn es dasselbe tut, warum sollte ich es verwenden wollen?

Einfach. Die von Vite produzierten Bündel sind kleiner. In der Praxis bedeutet dies 2 Dinge:

Schnellere Entwicklungsgeschwindigkeit. Da weniger Code produziert werden muss, transpiliert es schneller.
Schnellere Ladegeschwindigkeit des Browsers. Kleinere Pakete werden schneller geladen.

Haftungsausschluss

Bevor wir in Vite eintauchen. Sie müssen wissen, dass ältere Browser NICHT unterstützt werden.

babyl entfernen

Entfernen Sie auf Ihrer package.json alles, was mit Babel zu tun hat:

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

Entfernen wir danach die Webpack-bezogenen Bibliotheken.

Entfernen von Webpack

Entfernen Sie auf Ihrer package.json :

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

Webpack und Babel entfernt. Jetzt. Lassen Sie uns Vite hinzufügen.

Vite hinzufügen

Installieren viteund vite-plugin-vue2ausführen:

npm install -D vite vite-plugin-vue2

Neuordnung der Dateien

Vite ist ein wenig eigensinnig mit der Struktur der Dateien unseres Projekts. Wir müssen die Verzeichnisse unserer statischen Dateien ändern.

Alles, was sich im öffentlichen Ordner befand, nehmen Sie ihn in das Stammverzeichnis.

Das „alles“, auf das ich mich beziehe, ist normalerweise:

index.html
favicon.ico

Änderungen an der Datei index.html

Wenn Sie Ihre index.html öffnen , finden Sie so etwas:

<!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>

Mit anderen Worten. Alles was <%...%>raus muss.

Sobald das erledigt ist, sollten wir so etwas haben:

<!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>

Hinzufügen der Vite-Konfigurationen

Ähnlich wie beim Hinzufügen von Konfigurationen zu Webpack müssen wir dies mit Vite tun.

Eine einfache Konfigurationsdatei:

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"),
    },
  },
});

Zuerst. Wir importieren die Abhängigkeiten, die wir brauchen.

import { defineConfig } from "vite"

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

import path from "path";

Nun zu den harten Sachen.

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

plugins: [vue()],

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

Fügen Sie Vite-Skripte hinzu

Wir müssen auch unsere Skripte aktualisieren. Davon:

"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"
},

Unsere Konfiguration funktioniert bisher nicht mit Vuetify. Wir brauchen einige spezielle Optimierungen, um dies zu erreichen.

Zusätzlicher Schritt

Von jetzt an. Immer wenn wir eine Single File Component (SFC) importieren, müssen Sie die Erweiterung einschließen.

Wann konnten wir das vorher tun:

import HelloWorld from '@/components/HelloWorld';

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

Damit Eslint korrekt mit Vite funktioniert, müssen wir einige Einstellungen anpassen. Wenn Sie es nicht verwenden, können Sie diesen Abschnitt überspringen.

Die übliche babel/eslint-Konfiguration sieht ungefähr so aus:

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "parserOptions": {
    "parser": "@babel/eslint-parser"
  },
  "rules": {}
}

Gehen Sie in der envOption von node: truebis es2021: true.
Entfernen Sie vollständig die parserOptions.

{
  "root": true,
  "env": {
    "es2021": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "rules": {}
}

Wir müssen das folgende Paket installieren, um Vuetify mit Vite zu verarbeiten.

npm install -D unplugin-vue-components

import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
import { VuetifyResolver } from "unplugin-vue-components/resolvers";
import Components from "unplugin-vue-components/vite";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        // Vuetify
        VuetifyResolver(),
      ],
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Schlussfolgerungen

Die Migration von Webpack zu Vite ist kein großer Aufwand. Der Geschwindigkeitszuwachs lohnt sich jedoch.
Wir brauchen Babel nicht mehr.
Vite ist in Bezug auf Dateispeicherorte rechthaberisch.
Vuetify erfordert spezielle Konfigurationen.