Découverte de Vite — Formation Apprendre le JavaScript

Dans la précédente vidéo nous avons parlé de l'écosystème JavaScript et je vous propose maintenant de découvrir un de ces outils : Vite. Cet outil intègre un serveur de développement qui permet de travailler rapidement sur du JavaScript (avec un système de rechargement à chaud) et un bundler qui va construire vos fichier pour les distribuer.

Sommaire

00:00 Introduction
00:40 Installation
02:56 Utilisation de modules NPM
06:30 Import de fichiers non JS
08:00 Gestion du CSS
10:05 Gestion de SASS
11:20 Import asynchrone
13:50 Gestion de l'environnement
16:40 Les plugins
18:17 Intégration de vite avec le backend
28:06 Comparaison

Installation

Vite peut être utilisé pour initialiser un nouveau projet.

Avec npm

npm create vite@latest

Avec yarn

yarn create vite

Avec pnpm

pnpm create vite

Il vous posera alors quelques question pour configurer votre projet et vous donnera les instructions à suivre pour démarrer.

Fonctionnalités

Vite offre différentes fonctionnalités qui sont utiles lorsque l'on travaille sur du JavaScript.

Serveur de développement

La commande npm run dev va permettre de lancer un serveur de développement qui distribuera vos ressources et qui intégrera un système de rafraichissement à chaud pour actualiser le contenu de votre page sans forcément la recharger (fonctionne pour du CSS et dans le cas de certains frameworks JavaScript comme React).

Utilisation de modules npm

Avec Vite il est possible d'utiliser n'importe quelle librairie disponible sur npm dans son projet. On commencera par installer le module :

npm install --save canvas-confetti

Et on peut ensuite l'inclure dans son projet en utilisant le nom du paquet lors de l'import.

import confetti from 'canvas-confetti'

confetti();

Vite se chargera alors de distribuer le bon fichier (en appliquant des transformation si nécessaire pour le rendre compatible avec le navigateur).

Import non JavaScript

En plus des imports depuis le dossier node_modules il est possible d'importer des fichiers qui ne sont pas du JavaScript.

Les fichiers JSON seront interprétés comme des objets JavaScripts.

import data from './data.json'

console.log(data) // {...}

Si vous importez des images, il vous renverra le chemin vers l'image (accompagné d'un hash pour le cache lors du build).

import monImage from './monImage.jpg'

console.log(monImage) // "/assets/monImage-ahju37.jpg"

Import de CSS

Vous pouvez aussi importer du CSS.

import from './demo.css'

Le comportement de cet import varie en fonction du mode de vite.

En mode dev, Vite va injecter le style de vos fichiers CSS directement sur la page courante. Lorsque vous modifiez votre fichier CSS, il modifiera le style injecté dans la page pour vous permettre de voir les changements sans rechargement de la page.
En mode build, un fichier CSS séparé sera généré regroupant tous les fichier CSS importés dans votre code JavaScript.

Vite supporte aussi les préprocesseurs comme SASS et post-css.

Support des variables d'environnement

Vite expose les variables d'environnements qui commencent par VITE_ au code JavaScript.

console.log(import.meta.env.VITE_SOME_KEY) // 123

Les autres variables d'environnements ne sont pas exposées au JavaScript afin d'éviter des risques en terme de sécurité. Il supporte l'utilisation de fichiers d'environnement qui sont chargés dans cet ordre :

.env
.env.local
.env.[mode]
.env.[mode].local

Si une même variable est présente dans plusieurs fichiers, seule la dernière valeur sera utilisée.

Pourquoi vite est différent ?

Vite approche le problème du développement front-end d'une nouvelle manière. Plutôt que de générer un "bundle" à chaque modification d'un fichier, Vite se repose sur le support des import natif en créant un serveur personnalisé qui va délivrer des fichiers JS compatibles avec le navigateur.

Prenons par exemple ce fichier :

import React from 'react'

export function Demo () {
  return <div>Hello world !</div>
}

Lorsqu'il sera obtenu depuis le serveur de développement, le code sera automatiquement transformé.

import React from '/node_modules/.vite/react/react.js'

export function Demo () {
  return React.createElement('div', {}, 'Hello world !')
}

En plus du code de base, du code sera aussi ajouté pour déclencher le rafraichissement automatiquement la page lorsque vous modifiez un fichier.

Cette approche permet à vite d'être plus rapide vu que tous les fichiers n'ont pas besoin d'être recompilés à chaque modification. Seul le fichier modifié aura besoin d'être transformé à la prochaine requête. Vite intègre d'ailleurs par défaut le HMR (Hot Module Replacement) pour les frameworks React, Preact et VueJS.

Pour la phase de build, Vite se repose sur Rollup en offrant une configuration de base généraliste qui conviendra à la plupart des cas. Pour des cas plus complexes, vous pouvez étendre la configuration via un fichier vite.config.js.

Intégration avec le backend

Il est aussi possible d'utiliser Vite pour des sites qui sont générés côté serveur (vous pouvez regarder sur awesome-vite pour des intégrations clef en main).

Dans le cas d'une intégration backend, il faudra modifier la configuration de vite pour l'adapter à votre environnement.

import { defineConfig } from "vite"

export default defineConfig({
    server: {
        origin: 'http://localhost:5173' // Règle le problème des chemins dans le CSS
    },
    base: '/assets',
    build: {
        copyPublicDir: false,
        outDir: 'public/assets',
        assetsDir: '',
        manifest: true,
        rollupOptions: {
            input: 'resources/main.js',
        },
    },
  })

Ensuite, dans l'en tête de notre page, il faudra charger les ressources depuis le serveur de développement (pendant la phase de dev) et les ressources construites pour la production. Voici un exemple simple en PHP pour comprendre le principe (dans un cas réel il est conseillé d'utiliser du cache pour éviter de lire le fichier manifest.json à chaque chargement de page).

<?php
$dev = true;
if (!$dev) {
    $manifest = json_decode(file_get_contents('./assets/manifest.json'), true);
    ?>
    <script src="/assets/<?= $manifest['resources/main.js']['file'] ?>" type="module"></script>
    <link rel="stylesheet" href="/assets/<?= $manifest['resources/main.css']['file'] ?>">
    <?php
} else {
    ?>
    <script src="http://localhost:5173/assets/@vite/client" type="module"></script>
    <script src="http://localhost:5173/assets/resources/main.js" type="module"></script>
    <?php
}
?>

Publié

Technologies utilisées

JavaScript ViteJS