Tutoriel Vidéo Browserify Browserify

Télécharger la vidéo

26-12-2014 12:49:00

Les applications que l'on développe sont de plus en plus complexe et il devient de plus en plus impératif de rendre le code modulable. Le but est de décomposer notre code sous forme de modules pour avoir un code plus simple à maintenir et à debugguer.

Contrairement à d'autres languages Javascript ne possède pas encore de solution pour importer des modules (ECMAScript 6 devrait corriger le problème). La seule solution que l'on a actuellement, c'est de devoir importer nos scripts dans le code HTML, afin qu'ils s'injectent dans des variables globales.

En attendant l'implémentation des modules de l'ECMAScript 6, plusieurs propositions ont été faites. Heureusement aujourd'hui il existe plusieurs solutions pour créer et charger des modules

  • AMD, Asynchronous Module Definition pour le chargement asynchrone (conçu pour le front-end)
  • CommonJS, propose un standart pour gérer les modules et package côté serveur

Le gros avantage de CommonJS c'est qu'il s'intègre très bien avec le gestionnaire de paquet NPM (npm is not an acronym). NPM étant un simple gestionnaire de paquet et on peut tout à fait l'utiliser pour du front end (jQuery, Angular, Underscore... ont déjà fait le pas). Mais comment charger les modules ?

Browserify = CommonJS pour le front

Browserify est un module NodeJS qui va nous permettre d'utiliser la fonction require() dans le navigateur

var $ = require('jquery');
var _ = require('underscore'); 

Comment ça marche ?

Pour commencer, vous devez l'installer via npm, il suffit de taper dans la console :

npm install -g browserify

Ce qui nous permettra d'utiliser la commande browserify

browserify

Browserify va agir comme un preprocesseur et permettra de convertir un fichier avec require en un fichier compatible avec le navigateur.

browserify source.js -o output.js

Charger une librairie externe

Prenons un exemple concret pour voir comment fonctionne le système de module. J'ai besoin de jQuery et underscore pour mon script

Je commence par installer les dépendances via npm

npm install jquery --save
npm install underscore --save

Dans mon fichier js je vais pouvoir utiliser la fonction require

var $ = require('jquery');
var _ = require('underscore');

$('body').append('Salut ^^'); 

Ensuite on doit convertir notre fichier avec browserify

browserify script.js -o script.dist.js

Ce qui aura pour effet de créer un fichier script.dist.js qui incluera nos 2 dépendances, jquery et underscore.

Et si je veux créer mes propres modules ?

Rien de plus simple ! Quand on crée une classe ou une variable, on ne la balance pas globalement mais on doit l'exporter gràce à module.exports

var maClass = function(){
    maClass.prototype.return = function(){
        return maVariable;
    }
}
module.exports = maClass;

Ensuite, dans notre script principal on peut charger notre module

var maClass = require('./maClass.js');
var classOne = new Class();
classOne.return;

Si le fichier à déjà été inclus auparavent, ce dernier ne sera pas réinclus, vous pouvez donc require le fichier plusieurs fois à plusieurs endroit sans vous inquiéter.

Enfin, il faut lancer la commande browserify dans la console (Je vous conseille de vous placer dans le bon dossier avant de taper la commande)

browserify votreFichier.js -o votreFichierDeSorti.js

Et voila ! cette commande va charger votre fichier js et l'inclure dans votre fichier de sorti.

Watchify

Petite note pour les plus flemmards, si vous avez la flemme de lancer cette commande après chaque modification, vous pouvez aller voir du côté de Watchify, ce dernier fait la même chose que Browserify, mais va regarder le fichier indiqué en permanence, puis à chaque modification, le recompiler automatiquement. Les arguments sont les mêmes que la commande Browserify.