WebPack vous fait peur ? Vous le trouvez trop complexe ? Vous cherchez un gestionnaire de paquets plus simple, plus rapide ?
C’est ce qu’ils promettent sur le site de FuseBox. Découvrons ensemble FuseBox.
Première étape – L’installation de FuseBox
Lancement de la commande : npm install fuse-box typescript terser uglify-js –save-dev
On note tout de suite que typescript est à installer … intéressant 
Mais c’est quoi terser ?
Terser vous permet de minifier, compresser vos fichiers javascript, pour tout code javascript ES6 ou plus.
FuseBox va donc pouvoir utiliser Terser dans la génération des fichiers. Ou bien uglify-js.
Et qu’est ce que uglify-js ?
Uglify-js aussi un compresseur javascript, par contre, il ne supporte pas ES6+. Ainsi, vous pouvez être vite limité dans son utilisation si vous utilisez dans votre code des functions lambdas par exemple.
Seconde étape – On paramètre notre fichier de configuration FuseBox
Dès votre projet prêt, avec les packages installés, créez un fichier fuse.js, pour initialiser FuseBox.
Pour commencer, indiquons la version javascript à générer, le dossier de sortie :
const fuse = FuseBox.init({
homeDir: « src »,
target: « browser@es6 »,
output: « dist/$name.js »,
plugins: [WebIndexPlugin()],
});
- homeDir: le dossier où se trouve les sources typescript
- target: la version EcmaScript de javascript
- output: le dossier où sera générée le fichier javascript
- plugins: l’ensemble des plugins ajoutés au moteur. Ici, on note le WebIndexPlugin qui permet de générer une page html une fois la compilation réussie.
Troisième étape – Préparation du lancement de la page html, et configuration du moteur dynamique fuseBox
fuse.dev();
fuse
.bundle(« app »)
.instructions( » > index.ts »)
.hmr()
.watch();
fuse.run();
Ici, nous notons plusieurs points :
- nous lançons l’application en mode développement : fuse.dev
- le moteur fusebox chargera en premier le fichier typescript index.ts
- nous activons le Hot Module Replacement (hmr)
Appel via node.js
Pour le plus important ici, pour lancer notre page web, avec nos fichiers générés via FuseBox, il nous faut appeler le fichier fuse.js, avec node !
Ce qui nous donne : node fuse.js
Quatrième étape – Préparation pour la mise en production
Une fois que nous avons bien vérifié que notre application fonctionne en développement, nous allons pouvoir tout préparer pour la mise en production.
Pour y arriver, nous allons utiliser un plugin prévu pour ça : Quantum. Très light, il va nous permettre de préparer la mise en production, de manière la plus optimisée possible.
const { FuseBox, WebIndexPlugin, QuantumPlugin } = require(« fuse-box »);
Il nous reste juste à modifier notre initialisation de FuseBox :
const fuse = FuseBox.init({
homeDir: « src »,
target: « browser@es6 »,
output: « dist/$name.js »,
plugins: [WebIndexPlugin(), isProduction && QuantumPlugin()],
});
Ainsi, si l’on est production, on va appeler le plugin Quantum, sinon, juste le WebIndexPlugin.
Ce qui nous fait apparaître un beau message de log :
Launching quantum core
→ Generating abstraction, this may take a while
→ Abstraction generated
→ Process bundle app
→ Process package default
→ Files: 3
→ Render bundle app
Notre ressenti
Pour un premier POC, FuseBox nous a impressionné. Très peut de choses à faire, une documentation claire, et efficace.
Tout est là pour donner envie d’utiliser encore plus FuseBox.
Rapide, les bundles se font bien, la mise en production aussi.
Et le tout sur des fichiers TypeScript ! Vraiment, on va continuer à s’intéresser à FuseBox !