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". Autrement dit, le navigateur se rafraîchit dès que vous modifiez votre code, de façon similaire à ce que CodePen fait.

Installation

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

   • À partir de ce dossier, 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 ↵.

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

   2. Nom donné au projet Demo

   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.

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.

Développement

Pour commencer à développer, 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!

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

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.

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é.

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/

Alternatives

• Snowpack

• Webpack

• Gulp

• Rollup

• etc.