Dans cet article je vais te présenter Parcel Bundler, un outil qui permet de builder très facilement tes applications Javascript pour le web. Tu connais peut-être déjà cet outil qui a fait un grand bruit quand il a été mis en ligne… Car Parcel prétend pouvoir builder ton application Javascript sans aucun fichier de configuration à créer. Incroyable non?
Alors que les outils traditionnels pour builder les applications JS requière de nombreux réglages pour mettre en place une configuration complète, Parcel permettrait donc de s’affranchir de l’étape fastidieuse qui consiste à concevoir un environnement de développement digne de ce nom.
Les outils de build
Les outils tels que Webpack on déjà tenté d’introduire ce type de promesse mais finalement on se retrouve quand même contraint à devoir créer un fichier de config pour orchestrer correctement les étapes pour builder une application JS complète.
La création de ce fichier de configuration requière des compétences techniques qui peuvent rebuter les débutants et la courbe d’apprentissage pour maitriser les outils comme Webpack est difficile et rend l’utilisation complexe.
C’est dans ce contexte d’est apparu Parcel Bundler, dont le but est de proposer au débutant un outil facile à prendre en mains et qui requière très peux voir aucune configuration pour fonctionner.
Fonctionnement de Parcel Bundler
Je vais te présenter dans la suite de cet article, comment fonctionne Parcel et comment l’utiliser pour mettre en place un véritable environnement de développement avec zéro configuration.
Pour faire fonctionner Parcel, ton projet web doit avoir un minimum de structure en place pour permettre d’architecturer correctement tes fichiers et ainsi pouvoir plus facilement les retrouver. Je vais te proposer une structure que l’on retrouve dans la plupart des framework de développement frontend moderne actuel.
Ce model d’architecture le voici:
/mon-projet
├── package.json
├── src
├── app
│ ├── app.js
│ ├── app.css
│ ├── app.html
│
├── assets
│ ├── img
│ ├── mon-image.png
│
├── index.html
Tu pourra retrouver une démo de Parcel sur mon Github dans ce repository:
https://github.com/FazioNico/parceljs-demo
Ainsi que la doc officiel de Parcel Bundler:
https://parceljs.org/
On constate ainsi que nous avons uniquement un fichier package.json et un dossier src qui contiens les « sources » de l’application.
Dans ce dossier on trouve plusieurs sous-dossiers dont app et assets dans lesquels on pourra organiser notre application.
On constat aussi un fichier index.html qui se trouve également dans le dossier src c’est le point d’entrée de notre application et c’est par ici que Parcel va commencer à identifier tous les composants utilisés dans l’application.
Maintenant, voici ce que tu dois mettre dans ton fichier index.html pour que Parcel puisse trouver le fichier JS principal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parcel Bundler Demo</title>
</head>
<body>
<app></app>
<script src="./app/app.js"></script>
</body>
</html>Tu remarques la balise app que l’on va utiliser pour implémenter l’application. On constate aussi une balise script qui point vers le fichier JS qui est le point d’entrée principal du script de notre application.
On peut donc ajouter du code dans le fichier JS app.js pour afficher du texte dans la balise app avec un bout de code de ce type:
const myApp = document.querySelector('app');
myApp.innerHTML = `Hello Parcel Bundler`;Voilà pour la base. Il ne reste plus d’a installer et exécuter Parcel avec NPM.
Installation de Parcel Bundler
L’outil s’installe comme n’import quel package NPM avec une commande d’installation que voici:
$ npm install parcel-bundler –save-dev
Cela va télécharger les packages Node pour faire fonctionner Parcel.
Quand cela est terminé, tu peux démarrer Parcel avec la commande $ parcel src/index.html . Cela vas ouvrir ton navigateur avec l’application buildée.
Tu peux aussi exécuter la commande $ parcel build src/index.html pour générer un répertoire ./dist à la racine de ton projet qui contiendra la version « production » de ton application.
Facile non??
Je te conseil d’ajouter ces deux commande dans des script du fichier package.json pour pouvoir les exécuter plus facilement.
...
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html",
"test": "echo \"Error: no test specified\" && exit 1"
},
...Regardons maintenant comment ajouter des imports CSS, HTML ou encore comment gérer les assets de ton application.
Gestion simplifiée des Dépendances
C’est ici que les choses ses complique généralement avec les outils de build tel que Webpack.
Souvent il faut mettre en place divers plugins à configurer pour pouvoir importer les assets dans l’environnement de production correctement.
Ici, rien de plus simple! Avec Parcel tu n’as qu’à renseigner les urls de tes assets dans ton HTML et le tour est joué.
Rien à faire. Parcel détecte tout seul les imports de fichiers et te les copie automatiquement dans le répertoire de distribution.
Et pour les styles CSS? Un import suffit!
Parcel va également détecter le fichier et met en place la logique d’import. Aussi simple que cela.
On peut même importer des fichiers HTML pour les utiliser dans des fichiers JS! Comme le fait Angular 😉
Voici un exemple plus complet:
// import des feuilles de style CSS
import './app.css';
// import du template HTML
import html from './app.html';
// detection d'une balise HTML pour implémenter le DOM avec le template importé
const myApp = document.querySelector('app');
// injection du template HTML dans le DOM
myApp.innerHTML = html;Incroyable non? C’est tellement simple en comparaison à Webpack. Rien à configurer, Parcel examine les paths d’import et effectue la bonne tâche automatiquement.
Conclusion
Je t’ai présenté cet outil facile à mettre en place pour builder tes applications JS.
Parcel permet de rapidement avoir un environnement de développement performant sans avoir à créer de fichier pour sa configuration.
On remarque néanmoins que les settings par default de Parcel sont très basiques en comparaison à Webpack. Il faudra tous de même ajouter des plugins et des fichiers de config si tu désires customiser ton build et y ajouter des fonctionnalités comme SCSS ou utiliser Babel.
Malgré tous, Parcel reste très utile et facile à utiliser, c’est pourquoi j’ai tendance à le conseiller au développeurs frontend débutant ou pour les micro projet de type « PoC ».
Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.
Demande ta version numérique gratuite de mon livre Javascript Array Methods
