Browserify et Watchify NodeJS

Logos de browserify, nodeJS, npm, un texte watchify

Pour utiliser des packages NodeJS, on utilise l’instruction require(). Le module est installé dans un répertoire avec la commande npm install. On développe ensuite un fichier Javascript qui importe le module et ses dépendances avec require('theModule'). Afin d’utiliser le javascript dans une page HTML qui sera affichée dans un navigateur, le fichier js doit être compilé pour inclure le module, le javascript sur le client ne reconnaissant pas l’instruction require. Cela se fait avec browserify.

Lorsque l’on développe un fichier javascript, de nombreuses modifications s’effectuent sur le fichier. Afin de le tester pendant le développement, on automatise la compilation du javascript avec watchify, qui est un watcher sur le serveur qui surveille toute modification du fichier et lance une recompilation en cas de changement.

Les exemples suivant illustrent l’utilisation du module svgpath qui permet de modifier le path d’un fichier SVG ou d’image vectorielle. L’utilisation de browserify et watchify est la même pour tout autre module utilisant l’inclusion require() de NodeJS.

On installe browserify et watchify en global sur le serveur, on en aura sûrement encore besoin :

Certains recommandent de ne jamais ou très rarement utiliser npm en global avec sudo, dans ce cas on enlève l’option -g et on l’installe seulement dans le répertoire du projet qui contiendra le javascript utilisant l’instruction require().

On installe aussi le module svgpath avec npm :

On remarque la création d’un sous-dossier node_modules qui contient les fichiers installés avec npm.

On développe ensuite le fichier javascript que l’on peut appeler /path/to/my-project/js/main-script.js pour notre application, par exemple en utilisant svgpath :

Le fichier sera intégré à une page HTML avec la balise <script>. Ce fichier utilisant require() de NodeJS pour appeler les fonctions et les classes du module svgpath, il ne peut pas être utilisé comme cela et doit être compilé avant avec browserify. On appelle le fichier compilé bundle-script.js.

Le javascript pourra être alors intégré à la page HTML :

Si l’on est dans la phase de développement, il est assez rébarbatif de recompiler à chaque changement pour les tests, surtout si l’on fait de nombreuses erreurs ou si l’on change d’avis pour des broutilles. Afin d’éviter de recompiler en permanence le script avec browserify, on utilise watchify qui va se charger automatiquement de la compilation à chaque sauvegarde en inspectant le code du fichier source js. En cas de changement, le fichier bundle est à nouveau généré et la phase de compilation est invisible. En cas d’erreur, la console pourra éventuellement intercepter les messages et les inscrire dans le terminal. On lance dans le terminal la commande :

Le terminal ne redonne pas la main, il n’y a plus d’invite de commande. Si l’on veut arrêter le processus du wacher, on peut essayer le raccourci Ctrl+C. Si cela ne fonctionne pas, on retrouve l’invite de commande avec Ctrl+Z. Il faut alors tuer le processus node toujours en fonctionnement. On utilise pour cela les commande ps et kill.

Et hop, on peut utiliser des modules Node que l’on inclut avec require() dans des scripts personnalisés.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.