Tutoriel Vite

Vite est un outil de build frontend moderne qui vise à offrir une expérience de développement rapide en tirant parti de la prise en charge native des modules ES dans les navigateurs modernes.

Vite se compose de deux parties :

• Serveur de développement :Basé sur les modules ES natifs, il offre des mises à jour à chaud ultra-rapides.

• Commande de build :Utilise Rollup pour regrouper le code et générer des ressources statiques optimisées adaptées à la production.

Vite nécessite la version 18+ ou 20+ de Node.js. Cependant, certains modèles nécessitent une version de Node plus élevée pour fonctionner correctement. Lorsque votre gestionnaire de paquets émet un avertissement, veuillez mettre à niveau votre version de Node.

Points faibles des outils de build traditionnels

Avant Vite, le développement frontend utilisait généralement des outils de build comme Webpack. Bien que ces outils soient puissants, ils présentent certains points faibles :

• Démarrage lent :Plus le projet est grand, plus le temps de démarrage est long, ce qui affecte l'efficacité du développement.

• Mises à jour à chaud lentes :Chaque fois que le code est modifié, l'ensemble du projet doit être reconstruit, ce qui entraîne des mises à jour à chaud lentes.

• Configuration complexe :Des outils comme Webpack ont une configuration complexe et un coût d'apprentissage élevé.

L'apparition de Vite résout les points faibles des outils de build traditionnels et présente les avantages suivants :

• Démarrage ultra-rapide :En s'appuyant sur la prise en charge native des modules ES par le navigateur, aucun bundling n'est nécessaire et le démarrage est extrêmement rapide.

• Mises à jour à chaud rapides :Ne met à jour que les modules modifiés, préserve l'état de l'application et améliore l'efficacité du développement.

• Fonctionnalités riches :Prend en charge TypeScript, JSX, CSS, etc., sans configuration.

• Hautement extensible :Intégration facile d'autres outils et frameworks grâce au système de plugins.

Fonctionnement de Vite

Le fonctionnement de Vite peut être divisé en mode développement et mode production :

• Mode développement :

  • Vite démarre un serveur de développement et charge directement le code source en s'appuyant sur la prise en charge native des modules ES par le navigateur.

  • Lorsque le code change, Vite met uniquement à jour les modules modifiés et notifie le navigateur pour effectuer des mises à jour à chaud, en préservant l'état de l'application.

• Mode production :

  • Vite utilise Rollup pour regrouper le code et génère des fichiers de ressources statiques optimisés.

  • Ces fichiers peuvent être déployés sur n'importe quel serveur de fichiers statiques.

Scénarios d'application de Vite

Vite convient à divers projets, notamment :

• Applications monopages (SPA) :Comme les projets Vue, React.

• Sites statiques :Créer rapidement des blogs, de la documentation, etc.

• Développement de bibliothèques :Utilisez les fonctionnalités de build de Vite pour développer et regrouper efficacement des bibliothèques.

Créer un projet Vite

Vite propose plusieurs façons de créer un nouveau projet, la plus simple étant l'outil en ligne de commande.

Ouvrez un terminal ou un outil en ligne de commande et exécutez la commande suivante pour créer un nouveau projet Vite :

npm create vite@latest

Suivez les instructions pour saisir le nom du projet et sélectionner un modèle.

Vite fournit plusieurs modèles, notamment :

• vanilla:Projet JavaScript pur

• vue:Projet Vue.js

• react:Projet React

• preact:Projet Preact

• lit:Projet Lit

• svelte:Projet Svelte

Après avoir sélectionné un modèle, Vite créera automatiquement le répertoire du projet et installera les dépendances. Dans ce chapitre, nous avons choisi le framework Vue.

Si vous ne savez pas encore comment choisir, appuyer simplement sur Entrée à chaque étape fonctionne aussi. Les informations affichées dans la fenêtre sont similaires à ce qui suit :

Un projet créé avec Vite contient généralement les fichiers et dossiers suivants :

• node_modules:Dossier pour stocker les dépendances du projet.

• public:Dossier pour stocker les ressources statiques, telles que les images, les polices, etc.

• src:Dossier pour stocker le code source du projet.

  • main.js:Fichier d'entrée du projet.

  • App.vue:Composant racine du projet Vue.

• index.html:Page d'accueil du projet.

• package.json:Fichier de configuration du projet, contenant les informations du projet, les dépendances et les commandes de script.

• vite.config.js:Fichier de configuration de Vite, utilisé pour configurer diverses options de Vite.

Démarrer le serveur de développement

Entrez dans le répertoire du projet :

cd example-vite-test

Installer les dépendances :

npm install

npm run dev

Après exécution, les informations suivantes apparaissent :

VITE v6.2.0  ready in 684 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

Vite va démarrer un serveur de développement local et afficher l'adresse d'accès, par exemplehttp://localhost:5173, le port peut être configuré et modifié dans vite.config.js.

Ouvrez le navigateur et visitez l'adresse pour voir votre projet Vite.

Modifiez le code et visualisez le résultat

Ouvrez le fichier src/App.vue, modifiez le code et enregistrez le fichier.

Vous constaterez que le navigateur s'actualise automatiquement et affiche le résultat modifié.

Processus de démarrage de Vite

Défini dans package.json :

"scripts": {
  "dev": "vite"
}

Exécuteznpm run devAprès cette commande, npm recherchera l'exécutable local node_modules/.bin/vite, invoquera ce fichier et démarrera le serveur de développement.

Étapes clés du processus de démarrage de Vite :

1. Lire la configuration

   • Par défaut, lire celui du répertoire racinevite.config.jsouvite.config.ts。
   • La configuration comprendroot、aliasplugins, port, etc.

2. Résoudre les dépendances

   • Scannersrc/main.js(ousrc/main.ts) comme fichier d'entrée.
   • Effectuer une analyse des dépendances sur les modules ES.
   • Pour les chemins d'import (tels que@/components/Hello.vue) effectuer la résolution d'alias.

3. Démarrer le serveur de développement

   • Créer un serveur HTTP, port par défaut5173。
   • Fournir la capacité de remplacement de module à chaud (HMR).
   • Convertir les fichiers Vue, JS/TS, CSS, etc. en code reconnaissable par le navigateur grâce aux plugins Vite intégrés.

Ordre d'appel des fichiers (en utilisant un projet Vue 3 typique comme exemple)

npm run dev
    ↓
vite 命令执行
    ↓
读取 vite.config.js
    ↓
扫描入口文件 src/main.js / src/main.ts
    ↓
main.js 导入 App.vue 和 router/store 等
    ↓
App.vue -> template + script + style 分别由 Vite Vue 插件处理
    ↓
浏览器请求资源时，Vite 进行按需编译和模块缓存
    ↓
页面呈现，支持 HMR 热更新

Points clés

• Fichier d'entrée：main.jsoumain.ts, le point de départ de l'application Vue.
• Résolution de module: Vite utiliseesbuildpour traiter rapidement JS/TS et traiter les composants monofichiers Vue.
• Résolution d'alias：@Correspond àsrc/, dansvite.config.jsviaresolve.aliasconfiguré.
• Mises à jour à chaud: Lors de la modification.vuede fichiers ou de fichiers JS/TS, Vite mettra à jour localement les modules sans rafraîchir toute la page.

Fonctionnalités courantes de Vite

Vite offre des fonctionnalités riches qui peuvent vous aider à développer des applications front-end plus efficacement.

1. Utilisation des préprocesseurs CSS

Vite prend en charge les préprocesseurs CSS tels que Sass, Less et Stylus.

Pour utiliser ces préprocesseurs, vous devez d'abord installer les dépendances correspondantes :

Sass :

npm install -D sass

Less :

npm install -D less

Stylus :

npm install -D stylus

Une fois installé, vous pouvez utiliser le préprocesseur CSS correspondant dans votre projet.

Par exemple, dans un projet Vue, vous pouvez utiliser<style lang="scss">pour écrire du code Sass.

2. Utilisation de TypeScript

Vite prend en charge l'écriture de code en TypeScript.

Pour utiliser TypeScript, vous devez d'abord installer TypeScript :

npm install -D typescript

Une fois installé, vous pouvez renommer les fichiers .js en fichiers .ts et écrire du code en utilisant la syntaxe TypeScript.

Vite compilera automatiquement le code TypeScript.

3. Utilisation des ressources statiques

Vite prend en charge l'utilisation de ressources statiques telles que les images, les polices, etc.

Nous pouvons placer ces ressources dans le répertoire public, ou utiliser des instructions d'import pour importer des ressources.

Comment utiliser le répertoire public ?

Placez l'image logo.png dans le répertoire public, puis référencez l'image en utilisant /logo.png dans votre code.

4. Utilisation des instructions import

5. Utilisation des variables d'environnement

Vite prend en charge l'utilisation de variables d'environnement pour configurer différents environnements.

Vous pouvez utiliser.envun fichier pour définir des variables d'environnement.

Créez un fichier .env :

VITE_API_URL=https://api.example.com

Utilisez les variables d'environnement dans le code :

const apiUrl = import.meta.env.VITE_API_URL

6. Utilisation des plugins

Vite dispose d'un riche écosystème de plugins qui peut vous aider à étendre les fonctionnalités de Vite.

Nous pouvons utiliser les plugins Vite pour implémenter des fonctionnalités telles que la compression de code, l'optimisation d'images et l'analyse de code.

Installez le plugin :

npm install -D vite-plugin-xxx

Configurez le plugin :

Configurez le plugin dans le fichier vite.config.js :

import xxx from 'vite-plugin-xxx'

export default {
  plugins: [
    xxx()
  ]
}

vite.config.js est le fichier de configuration principal d'un projet Vite. En configurant vite.config.js, vous pouvez personnaliser divers comportements de Vite, tels que le serveur de développement, les options de build, les plugins, etc.

Voici un exemple de configuration de vite.config.js :

1. root
   Spécifie le répertoire racine du projet, qui correspond par défaut au répertoire de travail actuel. Ici, il est défini sur./src, ce qui signifie que le code source du projet est placé dans lesrcrépertoire.

2. base
   Spécifie le chemin de base du projet, approprié lorsque le projet est déployé dans un sous-chemin. Par exemple, si le projet est déployé àhttps://example.com/my-app/, puis la définir à/my-app/。

3. server
   Configuration du serveur de développement :

   • port: Spécifiez le numéro de port du serveur de développement.

   • open: Indique s'il faut ouvrir automatiquement le navigateur au démarrage du serveur de développement.

   • proxy: Configurez le serveur proxy pour résoudre les problèmes d'origine croisée. Par exemple, les requêtes proxy commençant par/apiàhttp://localhost:8080。

4. build
   Configuration de build :

   • outDir: Spécifiez le répertoire de sortie du build.

   • assetsDir: Spécifiez le répertoire de stockage des ressources statiques (telles que les images, les polices).

   • sourcemap: Indique s'il faut générer des fichiers sourcemap pour le débogage.

   • minify: Indique s'il faut minifier le code,terserest l'outil de minification par défaut.

   • rollupOptions: Configurez les options de bundling de Rollup, telles que les dépendances externes et le découpage du code.

5. plugins
   Configurez les plugins Vite. Ici, le@vitejs/plugin-vueest utilisé pour prendre en charge les projets Vue.

6. resolve.alias
   Configurer les alias de chemin. Par exemple, mapper@àsrcle répertoire pour faciliter la référence dans le code.

7. css.preprocessorOptions
   Configurer les options du préprocesseur CSS. Par exemple, injecter globalement des fichiers de variables SCSS.

8. envPrefix
   Configurer le préfixe des variables d'environnement. Par défaut, Vite ne charge que les variables d'environnement commençant parVITE_le préfixe.