Les outils pour travailler côté front

A quoi sert NPM ?

NPM est le package manager de Node.js. Il sert à télécharger des librairies Javascript écrites par des développeurs qui veulent partager leur travail avec la communauté.

Pour simplifier vous tapez une commande et NPM télécharge et installe des fichiers Javascript dans votre répertoire. Bower est un autre outil pour installer des librairies mais il gère les dépendances entre librairies de manière différente. Bower n’est plus beaucoup utilisé.

A quoi servent Grunt, Gulp ?

Dans le développement front vous devez optimiser vos fichiers avant de les envoyer sur le réseau, il y a toutes une série de tâches à effectuer pour préparer vos fichiers, les deux plus importantes sont :

Il existe toute une série d’outils écrits en JavaScript qui peuvent s’occuper de réaliser ces tâches pour vous. Il suffit de les ajouter à votre projet à partir de NPM puis de lancer leur exécution.

Gulp et Grunt sont des task-runners c’est-à-dire que ce sont des outils qui vont lancer les tâches automatiquement (bundle, minification…) à partir d’un fichier de script.

Il faut signaler que vous n’avez pas réellement besoin de Gulp et Grunt car le fichier de config de NPM peut aussi servir à lancer des outils. Gulp et Grunt sont en train de tomber en désuétude en 2017.

Quel est l’utilité de Webpack ?

Javascript de base ne contient rien pour modulariser son code. A partir de la version ES6 Javascript contient des instructions pour importer ou exporter des classes, des fonctions… Un peu comme les include en PHP en plus puissant. Comme la version ES6 n’est pas encore implémentée correctement dans les navigateurs certains développeurs ont développé des systèmes d’import/export différents de la norme (CommonJS, AMD…). Webpack est capable de comprendre les principaux systèmes d’import/export.

Webpack est indispensable si vous développez en JavaScript car il permet d’utiliser les import/export. Vous pouvez vous reporter à la page dédiée à webpack.

Webpack est un module bundler, il va analyser les import/export de vos fichiers de code puis les placer dans un seul fichier. C’est ce fichier qui sera exporté vers le client.

Pendant le développement vous aurez donc votre code bien organisé en multiples fichiers en s’appuyant sur les import/export, le client final n’aura à télécharger qu’un seul fichier grâce à webpack. La configuration de webpack passe aussi par un fichier de configuration, comme webPpack est devenu indispensable les utilisateurs utilisent webpack pour réaliser la minification ou les tests par exemple, il n’y a plus vraiment besoin de Gulp et Grunt. A noter que vous pouvez quand même lancer webpack à partir de Grunt/Gulp.


Regardons ce que nous faisions avant webpack et la modularisation en JavaScript "classique".

Fichier JavaScript : js1.js

function display(msg)
{
    alert(msg);
}

Fichier JavaScript : js2.js

display("hello world");

Fichier HTML : index.html

<!DOCTYPE html>

<html> lang="en">
<head>
    <title>Document</title>
    <script> src="js1.js"></script>
    <script> src="js2.js"></script>
</head>
<body>

</body>
</html>

On peut voir que les deux fichiers JavaScript js1 et js2 sont importés dans la page HTML par la balise script.

Problème : Deux messages sont envoyés sur le réseau pour récupérer les fichiers. Les deux fichiers javascript ne sont pas reliés entre eux, la fonction display est créé dans l’espace global.

On peut rajouter la ligne suivante dans le fichier HTML :

<script>window.display("Cela fonctionne");</script>

On voit que display est une fonction de l’objet window.

Si vous avez plusieurs dizaines de bibliothèque le nombre de fichiers à importer peut devenir important et gérer les dépendances peut s’avérer complexe.

Si vous avez un ou deux fichiers JavaScript la solution d’import avec la balise script est parfaitement convenable.

Si vous avez beaucoup de fichiers vous pouvez passer à la solution import/export de ES6 avec webpack.

Avantage : tous les fichiers sont regroupés dans des modules dans un seul fichier, les fonctions ne sont plus définies dans l’espace global.

Transformons notre programme pour utiliser webpack.