Migration d'un projet hérité de Vue CLI vers Vite

Récemment, un ticket a été ajouté à notre sprint dans le but de réduire les packages présentant des vulnérabilités critiques et à haut risque dans un projet existant. Cette tâche implique la migration d'un projet Vue 2 qui utilise Vue CLI comme outil de construction vers Vite.

C'est une excellente opportunité de moderniser votre pile technologique et de profiter des avantages en termes de performances qu'offre Vite. Dans cet article, je partagerai les principales étapes que j'ai suivies pour terminer la migration.

---

Qu'est-ce que Vite ?

Vite (prononcé « veet ») est un outil de construction conçu pour fournir une expérience de développement plus rapide (et même rapide) et rationalisée pour les projets Web modernes.

Avec Vite, vous bénéficiez de temps de construction considérablement réduits, d'un serveur de développement incroyablement rapide et d'un processus de configuration simplifié.

---

Étapes de migration

1. Mettre à jour package.json

La première étape consiste à supprimer toutes les dépendances Vue CLI du projet. Cela inclut les packages liés à Babel, le fichier de configuration babel.config.js et les dépendances core-js.

<code>//package.json
"@vue/cli-plugin-babel": "~5.0.8", //remove
"@vue/cli-plugin-e2e-nightwatch": "~5.0.8", //remove
"@vue/cli-plugin-eslint": "~5.0.8", //remove
"@vue/cli-plugin-unit-jest": "~5.0.8", //remove
"@vue/cli-service": "~5.0.8", //remove

"core-js": "^3.6.4", //remove
"@babel/core": "^7.8.4", //remove
"babel-core": "^7.0.0-bridge.0", //remove
"babel-jest": "^25.1.0", //remove
</code>

Si votre configuration ESLint utilise "babel-eslint" comme analyseur, vous devez le remplacer.

<code>//package.json
"babel-eslint": "^10.0.3", //remove</code>

J'ai migré ma configuration ESLint de .eslintrc vers le format moderne eslint.config.mjs et j'ai mis à jour ESLint vers la version 8, que je recommande vivement.

<code>npm install eslint@8 eslint-plugin-vue@8 --save-dev

npx @eslint/migrate-config .eslintrc.js</code>

Après avoir nettoyé ces dépendances, j'ai ajouté Vite et un plugin pour l'intégration de Vue :

<code>npm install vite @vitejs/plugin-vue2 --save-dev</code>

---

2. Configurer Vite

Comme beaucoup d'autres bibliothèques, Vite utilise un fichier de configuration (vite.config.js) dans le répertoire racine du projet pour définir les options de construction et de développement. Voici un point de départ simple :

<code>import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [vue2()],
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});</code>

---

3. Déplacer et mettre à jour index.html

Dans Vue CLI, le fichier index.html se trouve généralement dans le dossier public. Cependant, Vite s'attend à ce qu'il se trouve dans le répertoire racine du projet. Déplacez les fichiers vers le répertoire racine et mettez à jour toutes les références de chemin si nécessaire.

<code>mv public/index.html index.html</code>

<code><link href="<%= BASE_URL %>favicon.ico" rel="icon"></link>  <link href="/favicon.ico" rel="icon"></link></code>

Incluez main.js car nous n'auto-injectons plus.

---

4. Mettre à jour les variables d'environnement

Vite gère les variables d'environnement différemment. Assurez-vous de mettre à jour ou de créer le fichier .env et d'ajouter le préfixe VITE_ à toutes les variables que vous souhaitez exposer. Par exemple :

<code>VITE_API_URL=https://api.example.com</code>

<code>// router/index.js
//remove
base: process.env.BASE_URL, 
//add
base: import.meta.env.BASE_URL,</code>

---

5. Script de mise à jour

Enfin, j'ai mis à jour le script dans package.json pour utiliser les binaires Vite au lieu de Vue CLI. Ils ressemblent à ceci maintenant :

<code>//from
"scripts": {
  "serve": "vue-cli-service serve --port 8084",
  "dev": "npm run serve",
  "build": "vue-cli-service build",
  "test:unit": "vue-cli-service test:unit",
  "test:e2e": "vue-cli-service test:e2e --headless",
  "lint": "vue-cli-service lint",
  "test": "npm run test:unit && npm run test:e2e"
},


//to
"scripts": {
  "serve": "vite --port 8084",
  "dev": "npm run serve",
  "build": "vite build",
  "test:e2e": "nightwatch --headless",
  "test:unit": "vitest --run",
  "test": "npm run test:unit && npm run test:e2e",
  "lint": "eslint ."
},</code>

---

Avec ces changements, vous pouvez désormais exécuter vos projets Vue 2 avec Vite et profiter de tous les avantages qu'il apporte, notamment des performances de build améliorées.

---

Prochaines étapes

Dans mon prochain article, je partagerai comment activer Nightwatch sans le plugin Vue CLI et migrer Jest vers Vitest. restez à l'écoute!

---

Si vous avez des questions ou souhaitez partager vos propres expériences avec Vite, n'hésitez pas à laisser un commentaire ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!