Il existe de nombreux empaqueteurs d’application web1. Le plus en vogue actuellement semble être Webpack mais il en existe un qui sort du lot pour sa simplicité : Parcel. Je vais vous expliquer pourquoi il faut l’utiliser.

Sommaire

Introduction

Qu’est-ce qu’un Bundler Javascript ?

C’est un outil qui va parcourir toutes les sources de votre application, les rassembler avec leurs dépendances et en construire un livrable.

Pourquoi Parcel ?

Par défaut, Parcel supporte de nombreux formats de fichier source (HTML, JS, SASS, …). Il n’est donc pas nécessaire de chercher des plugins. Bien entendu, il propose du rechargement à chaud, de la validation de code et d’autres fonctionnalités courante à ce type d’outil.

Mais l’énorme avantage de ce dernier est sa simplicité puisqu’il a une approche « 0 configuration ».

Installation

Vous pouvez l’installer comme CLI:

npm install -g parcel-bundler

Néanmoins, je préfère l’installer en dépendance de développement de mes projets :

npm install parcel-bundler --save-dev

Configuration

Je vous l’ai dit. Il n’y a rien à configurer ! 🙂

Utilisation

L’application web

Imaginons le fichier index.html suivant :

<html>
  <head>
    <title>Parcel quickstart</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Parcel quickstart</h1>
    <script src="script.js"></script>
  </body>
</html>

Avec un fichier style.css plutôt simple :

@import "./template.css";

body {
  font-family: monospace;
}

Mais qui dépend d’un autre template.css :

body {
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

Et un script.js permettant d’écrire le fameux « Hello world » :

const app = require("./app");

app.helloWorld();

Avec une dépendance vers le script app.js :

export function helloWorld() {
  console.log("hello world");
}

Parcel en action

Le serveur web

Pour démarrer un serveur web qui sert votre application web, il est nécessaire d’exécuter la commande suivante :

$ parcel index.html
Server running at http://localhost:1234
√  Built in 4.97s.time.js...

Vous pouvez vous rendre sur http://localhost:1234 pour accéder à votre application. Les livrables sont disponibles dans le répertoire dist2.

La modification de vos fichiers est prise en compte en temps réel et la console affiche les éventuelles erreurs de syntaxes avec le code source et en utilisant la coloration syntaxique.

L’empaqueteur

Un fichier par type de code

Ajouter les scripts suivants dans le fichier package.json de votre projet :

  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }

Vous pouvez alors démarrer votre serveur web de développement avec cette commande :

$ npm run dev

Ou lancer la construction de votre application web ainsi :

$ npm run build

Dans ce cas, le répertoire dist va contenir un livrable de 3 fichiers3 :

  • index.html : HTML minimisé avec les bons liens vers les scripts externes
  • script.[aléatoire].js : le code source de tous vos scripts Javascript minimisé
  • style.[aléatoire].js : le code source de tous les styles CSS minimisé
Un unique fichier HTML

Votre application web est peut-être assez petite pour vouloir intégrer le CSS et le Javascript dans votre HTML. Pour cela, il faut installer le plugin suivant et relancer la construction :

$ npm install parcel-plugin-inliner --save-dev
$ npm run build

Le fichier dist/index.html contient maintenant tout le code nécessaire à votre application. Vous n’avez plus qu’à déployer cet unique fichier sur votre serveur de production pour livrer votre application. 😎

Conclusion

J’utilise généralement la documentation en anglais mais il faut savoir qu’il existe une documentation en français.

Ce que j’apprécie avec Parcel, c’est sa simplicité et sa rapidité. Même si je ne les ai pas tous expérimentés, il supporte un nombre important de types de ressource différents4. Et si malgré tout Parcel ne supporte pas par défaut un type de ressource en particulier, n’hésitez pas à faire un tour du côté des plugins de la communauté Parcel.

Noter qu’une v2 est dans les cartons5. 😀

Parcel est vraiment le Bundler Javascript qu’il me fallait. Et pour vous ?

  1. Plus connus sous le nom de Bundler Javascript. ↩
  2. Avec des noms aléatoire pour prévenir tout problème de cache et avec les sources map Javascript pour déverminer votre application dans le navigateur. ↩
  3. Je vous conseille d’installer le plugin parcel-plugin-clean-dist pour nettoyer ce répertoire entre 2 constructions via la commande npm i parcel-plugin-clean-dist -D. ↩
  4. Des types de fichier tels que HTML, LESS, SCSS, TypeScript, Javascript, … ↩
  5. Elle est référencée sous parcel@next. ↩
https://blog.lecacheur.com/wp-content/uploads/2020/09/parceljs.pnghttps://blog.lecacheur.com/wp-content/uploads/2020/09/parceljs-150x150.pngSeBDéveloppementhtml,javascript,npmIl existe de nombreux empaqueteurs d'application web. Le plus en vogue actuellement semble être Webpack mais il en existe un qui sort du lot pour sa simplicité : Parcel. Je vais vous expliquer pourquoi il faut l'utiliser. Introduction Qu'est-ce qu'un Bundler Javascript ? C'est un outil qui va parcourir toutes les sources...Un blog, c'est un blog !