C’est à l’occasion du dernier meetup JS-Star, organisé par JS-Republic, que nous avons pu faire une revue des packagers JavaScript leaders du moment et de leurs fonctionnalités. Il est l’heure de faire le bilan sur ces petits outils qui rendent la vie bien plus simple !

Le thème de cette soirée était la gestion des dépendances en JavaScript en 2016, concept intrinsèquement lié aux packagers JavaScript. La première question qui vient alors, qu’est-ce qu’un packager et qu’est ce qu’il apporte par rapport à un Gulp ou un Grunt ?
Avec un Gulp ou un Grunt vous devez souvent spécifier l’ordre dans lequel vous voulez traiter vos assets d’entrés. Par exemple vous devez le spécifier une première fois pour concaténer les fichiers js, une autre fois pour exécuter vos tests et ainsi de suite…
Alors que finalement on voudrait juste pouvoir dire qu’un fichier A dépend d’un fichier B (à l’image de Node.js) et qu’en donnant juste le fichier “racine” nos outils soit assez intélligents pour concaténer, télécharger les dépendances ou encore exécuter les tests simplement.
Et c’est bien la mission que remplissent des outils comme Webpack, JSPM, ou encore Rollup.js que nous eu avons le droit de (re-)décrouvrir dans trois présentations au top !

Les différentes formes de packaging & Webpack

Antoine le Taxin (@ModuloM) introduit le sujet en nous expliquant en détail les différentes formes de packaging JavaScript (cf. vidéo ci-dessous). Il nous parle des historiques Globals et IIFE (Immediately-invoked function expression), puis de CommonJs, le format de Node.js, d’AMD initialement lancé par Require.js, UMD la tentative de réconciliation entre les deux précédents, et enfin de l’avenir avec les modules d’ES2015.
Dans cette même vidéo vous retrouverez Anthony Giniers (@aginiers) nous faire une explication plus que bienvenue pour bon nombre d’entre nous sur la cryptique configuration de Webpack !

JSPM

JSPM n’a pas été en reste pendant cette soirée grâce à Jordane Grenat (@JoGrenat). En nous mixant astucieusement hand’s-on et présentation académique il a su nous présenter cet outil qui gagnerait à être connu. A regarder !

RollupJS

Enfin la soirée s’est clôturée avec la présentation de RollupJS par Mathieu Breton (@MatBreton). Cet outil, peu connu se veut être un projet expérimental afin de promouvoir l’utilisation des modules ES6. Ce format qui sera le futur format de package JavaScript à l’avenir est encore trop peu utilisé, l’exemple en est des fichiers “main” pointés par les librairies Node.js qui sont tout le temps au format UMD.

Conclusion

En plus des divers formats de packaging JS, deux mots sont aussi revenus continuellement dans cette soirée : Tree-shaking
Derrière ce terme se cache le procédé qui consiste à supprimer le code mort (le code non utilisé) dans les dépendances JavaScript. En résulte une réduction potentiellement très importante du livrable de sortie.
A titre d’exemple un JavaScript utilisant D3.js et qui à l’origine fait plus de 58ko minifié et gzippé peut passer à 8ko avec ce procédé. (Source)
Vous retrouverez deux bouts de code qui vous permettront de mieux comprendre le concept. Et nous, nous vous disons au mois de mars pour le prochain meet-up JS-Star 😉

//-------------
// main.js
import {cube} from './maths.js';
console.log( cube( 5 ) ); // 125
//-------------
// maths.js
export function square ( x ) {
   return x * x;
}
// This function gets included
export function cube ( x ) {
   return x * x * x;
}

function cube ( x ) {
   return x * x * x;
}
console.log( cube( 5 ) ); // 125