Vuetify, de Webpack à Vite

Dec 08 2022

Un guide étape par étape sur la façon de migrer votre projet Vue2 avec Vuetify de Webpack vers Vite

J'ai beaucoup de projets hérités écrits en Vue2. Et quelle bibliothèque de styles j'utilise? Vuetifier bien sûr.

Cet article est conçu pour vous aider à tirer parti de la puissance de Vite. Parce que, même si vous avez du code hérité, vous méritez des temps de développement rapides.

Si vous n'avez pas besoin de prendre en charge les anciens navigateurs. Si vous souhaitez accélérer votre développement, builds. Si vous voulez une meilleure expérience globale. Vous voudrez peut-être jeter un œil à Vite.

Vite a des fonctionnalités similaires à Webpack. Il regroupe et compile votre code à partir de composants de fichier unique et de dactylographie en JavaScript vanille.

S'il fait la même chose, pourquoi voudrais-je l'utiliser ?

Simple. Les faisceaux produits par Vite sont plus petits. En pratique cela signifie 2 choses :

Vitesse de développement plus rapide. Comme il doit produire moins de code, il se transpile plus rapidement.
Vitesse de chargement du navigateur plus rapide. Les petits bundles se chargent plus rapidement.

Clause de non-responsabilité

Avant de plonger dans Vite. Vous devez savoir qu'il ne prend PAS en charge les anciens navigateurs.

Retrait de Babel

Sur votre package.json , supprimez tout ce qui concerne babel comme suit :

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

Cela fait, supprimons les bibliothèques liées à Webpack.

Suppression de Webpack

Sur votre package.json supprimez :

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

Webpack et Babel supprimés. À présent. Ajoutons Vite.

Ajout de Vite

Installez viteet vite-plugin-vue2en exécutant :

npm install -D vite vite-plugin-vue2

Réorganiser les fichiers

Vite est un peu opiniâtre avec la structure des fichiers de notre projet. Nous devrons changer les répertoires de nos fichiers statiques.

Tout ce qui était dans le dossier public, sortez-le dans le répertoire racine.

Ce "tout" auquel je fais référence est généralement :

index.html
favicon.ico

Modifications du fichier index.html

Si vous ouvrez votre index.html , vous trouverez quelque chose comme ceci :

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

Autrement dit. Tout <%...%>doit disparaître.

Une fois cela fait, nous devrions avoir quelque chose comme ceci :

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

Ajout des configurations Vite

De la même manière que nous ajoutons des configurations à Webpack, nous devons le faire avec Vite.

Un simple fichier de configuration :

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

Première. Nous importons les dépendances dont nous avons besoin.

import { defineConfig } from "vite"

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

import path from "path";

Passons maintenant aux choses difficiles.

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

plugins: [vue()],

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

Ajouter des scripts Vite

Nous devons également mettre à jour nos scripts. A partir de ceci :

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

Jusqu'à présent, notre configuration ne fonctionnera pas avec Vuetify. Nous avons besoin de quelques ajustements spéciaux pour y parvenir.

Étape supplémentaire

À partir de maintenant. Chaque fois que nous importons un composant de fichier unique (SFC), vous devez inclure l'extension.

Quand avant on pouvait faire ça :

import HelloWorld from '@/components/HelloWorld';

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

Pour qu'Eslint fonctionne correctement avec Vite, nous devons ajuster certains paramètres. Si vous ne l'utilisez pas, n'hésitez pas à sauter cette section.