Vite

Vite est un outil qui améliore l'expérience de développement front-end. Il permet de configurer un environnement avec un serveur de développement, un "builder" et un "hot-reload".

"Vite" (prononcé "veet") fait référence à un outil de développement web rapide créé par Evan You, le créateur de Vue.js. Il est utilisé pour accélérer la construction des applications modernes grâce à un serveur de développement basé sur des modules ES natifs qui permet un rafraîchissement quasi instantané des pages (Hot Module Reloading) et une commande de build optimisée pour la production qui utilise Rollup. Il prend en charge nativement des technologies comme le TypeScript et est devenu l'outil de développement par défaut pour de nombreux projets, y compris Vue.js et React.

Caractéristiques principales

• Vitesse de développement : Vite sert le code à la demande en utilisant les modules ES natifs, ce qui réduit considérablement les temps de démarrage et de rafraîchissement des pages pendant le développement.
• Hot Module Replacement (HMR) : Il met à jour les modules modifiés sans nécessiter un rechargement complet de la page, rendant le processus quasi instantané grâce au protocole WebSocket.
• Build de production optimisé : Pour la production, Vite utilise un bundler optimisé (Rollup) pour créer des fichiers statiques hautement optimisés.
• Prise en charge native : Il prend en charge nativement des fonctionnalités comme le TypeScript et JSX, et peut être étendu via un système de plugins.
• Facilité d'utilisation : Vite est conçu pour être simple et offre une expérience de développement fluide, avec une configuration de base qui est souvent quasi vide.

Installation Node et NPM sont nécessaire à l’installation de Vite.

NPM Gestionnaire de paquets JS

1. Choisissez le dossier où vous désirez créer votre projet.
   
   Vous avez maintenant trois options:

   • Sur le dossier du projet, effectuez un clic droit en tenant la touche Shift enfoncée. Le menu contextuel devrait afficher l'option "Open Windows Terminal Here".

   • Ouvrir directement le terminal, inscrire cd pour Change directory, y glisser-déposer votre dossier et appuyer sur la touche ↵.

   • RECOMMANDÉ: Ouvrir le dossier ou vous souhaitez créer votre projet dans Visual Studio Code et ensuite ouvrir le Terminal de Visual studio Code.

2. Maintenant que votre terminal se trouve dans votre dossier, vous pouvez lancer l'installation de Vite via la commande suivante:

npm init vite

3. Vite vous demandera alors quelques questions de configuration afin de s'adapter à votre projet:

   1. Installer le nécessaire: y pour yes.

   2. Nom donné au projet Demo ou tout autre nom pertinent (sans accent, ni espace, vous pouvez utiliser les tirets -.

   3. Nom du fichier package demo (généralement similaire au projet, d'où pourquoi j'accepte la suggestion dans la vidéo)

   4. Si on compte utiliser un cadriciel JavaScript (Vue, React, Svelte, etc.) ou Vanilla si ce n'est pas le cas.

   5. Si Vanilla a été choisi, Vanilla pur ou Vanilla avec TypeScript?

   6. Vite télécharge et génère les fichiers de base à partir de nos réponses.

Dans l’explorateur de fichiers, le dossier du projet devrait maintenant être visible et contenir quleques fichiers notamment index.html, main.js et style.css, package.json et même le dossier node_modules.

4. Vite nous propose de nous déplacer dans notre nouveau dossier avec cd [nom de votre projet] et d'installer les dépendances NPM via npm install. En effectuant ces commandes, un nouveau dossier node_modules devrait apparaitre dans votre projet qui est maintenant prêt à l'utilisation.

Si vous utilisez git et que vous avez un dossier node_modules, il sera impératif que vous ne le poussiez pas dans votre répertoire git public. Il faudra alors ajouter node_modules à votre fichier .gitignore Développement

Pour commencer à développer (bref entrer dans le mode développement), vous devez dans votre terminal vous déplacer dans le dossier de votre projet. À partir de cet endroit, lancer la commande suivante:

npm run dev

Cette commande vous retournera l'adresse de votre site en développement.

Par exemple: http://localhost:3000/

Ça y est, si vous changez quoi que ce soit dans vos fichiers, les changements apparaitront directement dans le navigateur!

Pour sortir du mode de développement, simplement tapper q dans votre terminal et ensuite appuyer sur la touche ↵.

Bref (pour le mode de développement)

Pour entrer dans ce mode: npm run dev Pour sortir de ce mode : q ↵ Bref q suivi de ↵ Enter Build

La commande build de Vite permet de générer des fichiers optimisés dans le but d'accroitre leurs performances lorsque vous êtes prêt à déployer en production. Autrement dit, tous les éléments inutiles à un ordinateur (sauts de ligne, espaces, etc.) sont retirés, réduisant ainsi le poids de ces fichiers et donc leur vitesse de chargement.

Ces fichiers sont ensuite déposés dans un dossier dist à l'intérieur de votre projet que vous pouvez ensuite déposer sur votre serveur.

Pour exécuter cette commande, il suffit d'inscrire la commande suivante dans le terminal:

npm run build

Les fichiers créés ont une clé ajoutée à leur nom dans le but d'éviter que les navigateurs de vos internautes leur servent une ancienne version de votre fichier se trouvant dans leur cache.

Ces noms sont automatiquement ajustés pour vous dans votre fichier index.html.

SASS (ne pas en prendre compte pour Web 5)

Par défaut, Vite ne supporte pas la syntaxe SASS. Si le fichier style.css est renommé style.sass ou style.scss une erreur sera retournée:

Preprocessor dependancy "sass" not found. Did you install it?

Heureusement, il suffit d'installer la dépendance demandée via la commande suivante pour régler le problème:

npm i sass --save-dev

Puisque le fichier main.js fait référence au fichier style.css, il faut changer dans celui-ci le nom.

import './style.css'

par

import './style.scss'

Dès que ce changement est effectué et que l'installation est complétée, il est possible de relancer le développement npm run dev. Vite supportera maintenant les fichiers .sass et .scss.

Vite scaffolding Multipage

Par défaut, Vite est prévu pour de ne supporter qu'une seule page (index.html). Afin d'obtenir un site multipage, il faut créez à la racine de son projet un fichier de configurations vite.config.js définissant de nouveaux points d'entrée.

Par exemple, afin d'obtenir une 2e page intitulée "about", il faut créer un dossier nommé "about", y insérer une page "index.html" et finalement spécifier une nouvelle configuration à Vite lui indiquant l'existence de cette nouvelle page:

const { resolve } = require('path') const { defineConfig } = require('vite') module.exports = defineConfig({ build: { rollupOptions: { input: { main: resolve(__dirname, 'index.html'), about: resolve(__dirname, 'about/index.html') } } } })

Pour accéder à cette nouvelle page, il suffit de spécifier le nom du dossier dans l'URL. Par exemple: http://localhost:3000/about/

Erreur fréquente
N’oubliez pas le / à la fin de l’URL, sinon la page par défaut affichera. Multipage Alternatives

• Snowpack
• Webpack
• Gulp
• Rollup
• etc.