Démarrer avec Vite : L’outil de construction ultime

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 à l’aide de npm :

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 une ventilation des options que la commande vous invite à sélectionner :

1. Nom du projet. Lorsque vous exécutez la commande, elle vous invite à fournir un nom pour votre nouveau projet. Le nom que vous fournissez apparaîtra également dans le champ package.json et servira de nom au répertoire de votre projet.
2. Choisissez 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.
3. Choisissez une variante. Cela vous invite à choisir une variante pour votre projet, couvrant des alternatives telles que JavaScript et son langage sous-ensemble TypeScript.

Après avoir fourni les informations requises, Vite génère une nouvelle structure de projet dans votre répertoire de travail actuel. La structure représentera une configuration de projet de base, comprenant un package.json un fichier src avec un fichier index.html et main.js et un fichier public public.

Après avoir créé la structure du projet, vous pouvez naviguer dans le répertoire du projet en exécutant la commande 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 à l’aide de la commande npm install .

Pour démarrer un serveur de développement et surveiller les modifications apportées à votre projet, vous exécuterez 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 pour 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 tels que React Js et Angular Js. Cela permet aux développeurs de choisir leur cadre préféré et d’exploiter les puissantes capacités de Vite.

Remplacement des modules à chaud (HMR)

La fonctionnalité 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. Cela rend le processus de développement 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 d’apporter des transformations et des optimisations supplémentaires au CSS.

Vite est livré avec 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 a maintenu activement le logiciel, en 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 contribuent également à 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 afin qu’il soit prêt à être déployé. Grâce à 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.

vite preview

Cette commande vous permet de prévisualiser le code généré avant de le déployer en production. Si vous souhaitez 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, il est utile d’exécuter cette commande.

vite optimize

vite optimize est disponible dans Vite 2.6 et les versions ultérieures qui analysent le code du projet et génèrent des builds de production optimisés en effectuant des opérations de shaking d’arbre, de division de code et d’intégration de petits actifs directement dans le build final afin de réduire les requêtes nécessaires au chargement de l’application.

vite optimize s’exécute automatiquement pendant l’étape vite build 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 un backend API.
• 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. Cette option configure la manière dont Vite résout les importations dans le projet. Il comprend des options pour spécifier les alias, les extensions et les répertoires de modules.

Voici un exemple de fichier de configuration Vite :

Ce fichier de configuration configure un projet Vite de base avec :

• un serveur de développement local fonctionnant sur le port 3000
• un alias pour le serveur de développement 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.

S’abonner à notre newsletter