Les articles de votre blog ici ? Inscrivez votre blog !

Premiers pas avec Vite : l’outil de construction ultime

Publié le 08 avril 2023 par Mycamer

À mesure que les applications Web deviennent plus riches en fonctionnalités, le besoin d’outils de création rapides et efficaces continue de croître.

Vite est un outil de construction moderne qui fournit un serveur de développement ultra-rapide 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).

UTILISEZ LA VIDÉO DU JOURFAITES DÉFILER POUR CONTINUER AVEC LE CONTENU

Initialiser un projet Vite

Avant de pouvoir utiliser Vitevous devez installer Node.js et Node Package Manager sur votre système. Après avoir installé ces deux packages, vous pouvez ensuite procéder à la création d’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 configurer 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 package.json fichier et servir de nom au répertoire de votre projet.
  2. Choisissez un cadre. Cette invite vous demandera de choisir un cadre pour votre projet. Vite prend actuellement en charge les frameworks frontaux populaires tels que React, Vue, Angular et une option Vanilla pour le code JavaScript brut.
  3. Choisissez une variante. Cela vous invite à choisir une variante pour votre projet, couvrant des alternatives telles que JavaScript et son sous-ensemble de langage TypeScript.

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

Après avoir créé la structure du projet, vous pouvez accéder au répertoire du projet en exécutant cd . Une fois que vous avez fait cela, installez toutes les dépendances supplémentaires dont votre projet peut avoir besoin en utilisant le installation npm commande.

Pour démarrer un serveur de développement et surveiller les modifications apportées à votre projet, vous exécuterez le npm run dev commande dans votre terminal de 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 de module paresseux, permettant une vitesse incroyable. Cela permet des boucles de rétroaction rapides et des temps de démarrage ultra-rapides.

Processus de construction optimisé

Vite a amélioré sa procédure de construction pour produire un code prêt pour la production, optimisé et minifié. De plus, 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, y compris 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 de module à chaud (HMR)

La fonction de remplacement de module à chaud (HMR) de Vite permet des mises à jour rapides et transparentes de l’application sans nécessiter une actualisation complète 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, permettant des transformations et des optimisations supplémentaires du 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.4la communauté de développeurs de Vite s’est développée et maintient activement le logiciel, ajoutant régulièrement de nouvelles fonctionnalités.

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. Il fournit une gamme de commandes essentielles qui aident également à rationaliser le processus de développement. Voici quelques-unes des commandes CLI cruciales :

construire vite

Cette commande créera l’application pour un environnement de production, en optimisant et en minimisant le code afin qu’il soit prêt à être déployé. À l’aide de cette commande, vous pouvez vous assurer que votre application est aussi rapide et efficace que possible et prête à être distribuée à vos utilisateurs.

aperçu rapide

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 a l’air et fonctionne comme prévu et qu’il n’y a aucun problème ou problème apparent nécessitant votre attention, il s’agit d’une commande utile à exécuter.

vite optimiser

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 secouage d’arborescence, de fractionnement de code et en intégrant de petits actifs directement dans la version finale pour réduire les demandes nécessaires au chargement de l’application.

vite optimiser s’exécute automatiquement pendant la construire vite commande, 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 construction

Fichier de configuration de Vite

Dans Vite, le fichier de configuration définit diverses options pour le processus de construction. Le fichier de configuration Vite utilise JavaScript et la syntaxe des modules ES6.

Par défaut, vous devez nommer votre fichier de configuration vite.config.js et placez-le 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 inclut des options pour configurer l’hôte, le port et les demandes de proxy vers un backend d’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 certaine manière, comme l’ajout de la prise en charge d’un nouveau format de fichier ou la transformation du code source.
  • résoudre. Cela configure la façon dont Vite résout les importations dans le projet. Il inclut des options pour spécifier des alias, des extensions et des répertoires de module.

Voici un exemple de fichier de configuration 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 s’exécutant sur le port 3000
  • un alias pour le src annuaire
  • pas de plugins

Plusieurs ressources en ligne expliquent en détail comment utiliser Vite avec des frameworks populaires tels que React, Vue et Angular.

De plus, il existe une mine d’informations sur l’utilisation efficace de Vite dans sa documentation officielle. Avec ces ressources disponibles, intégrer Vite dans votre prochain projet est possible.

to www.makeuseof.com

Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931