Introduction à Browserify, un module Node.JS

Cet article est une introduction à l’utilisation de modules Node.JS côté client grâce au module Browserify. A travers l’exemple de vkey, nous allons voir comment installer et utiliser ce module, pour pouvoir l’utiliser par la suite sur des projets personnels, et pourquoi pas en production.

Avant toute chose, je tiens à préciser que je ne suis pas un professionnel de Node.JS. Je m’y intéresse de plus en plus ces derniers temps car je le trouve très interessant, et permet de faire beaucoup de choses. La suite de l’article parle de mon expérience personnel et vise à aider d’autres débutants. Si vous avez des remarques, améliorations, n’hésitez pas les commentaires sont la pour ca ! 😉

Comme dit dans l’introduciton, Browserify va donc nous permettre d’utiliser des modules de Node.JS qui sont normalement côté serveur, de compiler le tout dans un fichier JavaScript qu’il suffira de lier à la page html. Il m’a fallu un temps pour comprendre cela la première fois, mais avec la pratique, cela m’a tout de suite parut plus clair et intuitif.

Premièrement, nous allons créer un nouveau projet. Ne vous inquiétez pas, il suffit de créer un dossier n’importe ou sur votre ordinateur, ce sera rapide, et rien d’insurmontable, au contraire. Nous allons aussi beaucoup utiliser la ligne la ligne de commande, elle est indispensable pour utiliser node.JS. Mettez vous donc à la racine de votre fichier avec votre ligne de commande. Pour installer Browserify, il faut taper la commande suivante : npm install browserify -g.

Cela va indiquer à npm, qui est le gestionnaire de dépendance de Node d’installer globalement Browserify. Globalement, grâce à l’option -g. Cela nous permettra par la suite d’utiliser des fonctions directement dans la ligne de commande . Une fois que Browserify est installé,vous pouvez créer un fichier app.js. Ce fichier contiendra la code de l’application que nous souhaiterons faire marcher dans le navigateur.

app

app

Ici pour l’article nous allons utiliser un module facile d’utilisation, qui m’a prit environ 30 secondes pour installer et utiliser. Rien de bien méchant. Ce module est vKey, il va nous permettre de gérer les inputs du clavier de l’utilisateur et de les transformer en résultat lisible par l’humain. Le but va donc être d’installer ce module, le rendre accessible au navigateur grâce à Browserify, de la compiler, puis de voir le résultat.

Pour installer vkey, on va taper la commande npm install vkey. Ici on l’installe seulement pour le projet (je ne pense pas que l’option globale soit disponible). Il est maintenant directement disponible dans notre fichier app.js. Comme dans toute application Node.JS, il nous suffit maintenant de faire un require(‘vkey’) pour charger le module dans notre fichier  app.js.

Nous avons donc dans notre fichier app.js la ligne suivante : var vkey = require('vkey');. Nous allons utiliser l’API de ce module qui permet de gérer les inputs de l’utilsateur en trois lignes seulement. Il suffit d’écrire :

JS

document.body.addEventListener('keydown', function(ev) {
    console.log(vkey[ev.keyCode]);
}, false);

Ici on utilise donc du code qui est normalement réservé au JavaScript dans le navigateur avec document.body, mais Browserify nous donne accès à ces variables, puisqu’il sera ensuite côté client. On voit aussi qu’on utilise directement vkey pour convertir le keyCode, c’est ici l’utilité de ce module.

Il ne nous reste maintenant plus qu’à compiler le fichier app.js grâce à Browserify et son installation globale en tapant dans la ligne de commande : browserify app.js -o bundle.js. Cela va créer un fichier bundle.js qui suffit maintenant de mettre dans un fichier html : <script type="text/javascript" src="bundle.js"></script>

Lancez maintenant le fichier html, même pas besoin de serveur puisqu’on a directement le fichier JS et on voit dans la console que les touches sont retransmises en langage compréhensible comme sur la capture d’écran ci-dessous :

Console.log()

Console.log()

C’est tout pour cet article, le but étant de vous montrer combien il est facile d’installer et d’utiliser des modules dans Node.JS et même maintenant de les utiliser dans des projets qui ne nécéssitent pas forcément un serveur Node.JS. Si vous voulez un liste de modules qui marchent avec Browserify et spécialisé dans le dévelopement de jeux, aller voir ce github : il y a quelques perles qu’il faut que j’essaie à tout prix.

Bon code !