Les applications web devenant de plus en plus riches en fonctionnalités, le besoin d’outils de construction rapides et efficaces ne cesse de croître.
Vite est un outil de construction moderne qui fournit un serveur de développement rapide comme l’éclair et un processus de construction optimisé, permettant aux utilisateurs de rationaliser leur flux de travail et d’améliorer l’expérience de l’utilisateur final.
Vous découvrirez comment démarrer avec Vite, en couvrant son processus d’installation, ses fonctionnalités essentielles et les commandes de l’interface de ligne de commande (CLI).
Initialiser un projet Vite
Avant de pouvoir utiliser Vite, vous devez installer Node.js et Node Package Manager sur votre système. Après avoir installé ces deux paquets, vous pouvez créer un projet avec Vite.
Voici comment initialiser un projet avec Vite en utilisant npm :
npm init vite
Lorsque vous exécutez cette commande, elle crée un nouveau projet Vite dans votre répertoire de travail actuel. La commande vous invite à faire des choix de configuration fondamentaux pour mettre en place votre nouveau projet Vite.
Voici un aperçu des options que la commande vous invite à sélectionner :
- Nom du projet. Lorsque vous exécutez la commande, elle vous invite à donner un nom à votre nouveau projet. Le nom que vous fournissez apparaîtra également dans la fenêtre package.json et sert de nom au répertoire de votre projet.
- Choisir un framework. Cette invite vous demandera de choisir un framework pour votre projet. Vite prend actuellement en charge les frameworks frontaux populaires tels que React, Vue, Angular, ainsi qu’une option Vanilla pour le code JavaScript simple.
- Choisir une variante. Ceci vous invite à choisir une variante pour votre projet, couvrant des alternatives telles que JavaScript et son sous-ensemble de langage TypeScript.
Une fois que vous avez fourni les informations requises, Vite génère une nouvelle structure de projet dans votre répertoire de travail actuel. Cette structure représente la configuration de base d’un projet, y compris un fichier package.json un fichier src répertoire avec un index.html et main.js et un fichier public répertoire.
Après avoir créé la structure du projet, vous pouvez vous rendre dans le répertoire du projet en exécutant la commande suivante cd <nom-du-projet> ;. Une fois que vous avez fait cela, installez toutes les dépendances supplémentaires dont votre projet pourrait avoir besoin en utilisant la commande npm install commande.
Pour démarrer un serveur de développement et surveiller les modifications apportées à votre projet, vous devez exécuter la commande npm run dev dans le terminal de votre projet.
Caractéristiques de Vite
Les fonctionnalités de Vite se concentrent sur la rationalisation du processus de construction et l’amélioration de l’expérience de construction web.
Serveur de développement rapide
Le serveur de développement de Vite utilise des modules ES natifs et un chargement paresseux des modules, ce qui lui confère une vitesse incroyable. Cela permet des boucles de rétroaction rapides et des temps de démarrage fulgurants.
Processus de construction optimisé
Vite a amélioré sa procédure de construction afin de produire un code optimisé, minifié et prêt pour la production. En outre, il crée un fichier manifeste qui peut mettre en cache les actifs de buste et de version.
Prise en charge de divers frameworks frontaux
Vite prend en charge divers frameworks frontaux, notamment Vue et des frameworks similaires comme React Js et Angular Js. Cela permet aux développeurs de choisir leur framework préféré et d’exploiter les puissantes capacités de Vite.
Remplacement des modules à chaud (HMR)
La fonction Hot Module Replacement (HMR) de Vite permet des mises à jour rapides et transparentes de l’application sans nécessiter un rafraîchissement complet de la page. Le processus de développement est ainsi plus rapide et plus efficace.
Prétraitement CSS et intégration PostCSS
Vite prend en charge le prétraitement CSS, y compris Sass, Less et Stylus. Il s’intègre également à PostCSS, ce qui permet des transformations et des optimisations supplémentaires du CSS.
Vite propose de nombreuses autres fonctionnalités, notamment la prise en charge de TypeScript, JSX et WebAssembly. Avec la sortie de Vite v4.0.4, la communauté de développeurs de Vite s’est agrandie et maintient activement le logiciel, en y ajoutant régulièrement de nouvelles fonctionnalités.
L’interface de ligne de commande (CLI) de Vite
L’interface de ligne de commande (CLI) de Vite est un outil pratique pour personnaliser le comportement de Vite. Elle fournit une série de commandes essentielles qui permettent également de rationaliser le processus de développement. Voici quelques-unes des commandes essentielles de l’interface de ligne de commande :
vite build
Cette commande construit l’application pour un environnement de production, en optimisant et en réduisant le code pour qu’il soit prêt à être déployé. En utilisant cette commande, vous pouvez vous assurer que votre application est aussi rapide et efficace que possible et qu’elle est prête à être distribuée à vos utilisateurs.
aperçu vite
Cette commande vous permet de prévisualiser le code généré avant de le déployer en production. Si vous voulez vous assurer que tout se présente et fonctionne comme prévu et qu’il n’y a pas de problèmes apparents ou de problèmes nécessitant une attention particulière, cette commande est utile.
vite optimize
vite optimiser est disponible dans Vite 2.6 et les versions ultérieures qui analysent le code du projet et génèrent des versions de production optimisées en effectuant des opérations de découpage de l’arbre et du code, et en intégrant de petites ressources directement dans la version finale afin de réduire le nombre de requêtes nécessaires au chargement de l’application.
vite optimize s’exécute automatiquement pendant l’opération construction de vite qui génère des versions de production optimisées. Vous pouvez également l’exécuter séparément pour vérifier la taille et les performances de la compilation
Fichier de configuration de Vite
Dans Vite, le fichier de configuration définit diverses options pour le processus de construction. Le fichier de configuration de Vite utilise JavaScript et la syntaxe des modules ES6.
Par défaut, vous devez nommer votre fichier de configuration vite.config.js et le placer dans le répertoire racine du projet.
Voici quelques-unes des options les plus couramment utilisées dans le fichier de configuration de Vite :
- racine. Spécifie le répertoire racine du projet.
- serveur. Configure le serveur de développement. Il comprend des options pour configurer l’hôte, le port et les demandes de proxy vers une API backend.
- plugins. Permet d’ajouter des plugins au processus de construction de Vite. Un plugin est une fonction qui modifie le processus de construction d’une manière ou d’une autre, par exemple en ajoutant la prise en charge d’un nouveau format de fichier ou en transformant le code source.
- résoudre. Ceci configure la façon dont Vite résout les importations dans le projet. Il inclut des options pour spécifier les alias, les extensions et les répertoires de modules.
Voici un exemple de fichier de configuration de Vite :
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
server: {
port: 3000,
open: true,
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
plugins: [],
});
Ce fichier de configuration met en place un projet Vite de base avec :
- un serveur de développement local fonctionnant sur le port 3000
- un alias pour le src répertoire
- pas de plugins
Vite a une forte communauté
Plusieurs ressources en ligne expliquent en détail comment utiliser Vite avec des frameworks populaires comme React, Vue et Angular.
En outre, la documentation officielle de Vite contient une mine d’informations sur son utilisation efficace. Avec ces ressources disponibles, l’intégration de Vite dans votre prochain projet est possible.
