Parcel – l’empaqueteur d’application web léger
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 dist
2.
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 ?
- Plus connus sous le nom de Bundler Javascript. ↩
- 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. ↩
- Je vous conseille d’installer le plugin
parcel-plugin-clean-dist
pour nettoyer ce répertoire entre 2 constructions via la commandenpm i parcel-plugin-clean-dist -D
. ↩ - Des types de fichier tels que HTML, LESS, SCSS, TypeScript, Javascript, … ↩
- Elle est référencée sous
parcel@next
. ↩
Laisser un commentaire