Accueil / Blog / Métier / 2014 / Browserify : pourquoi l'utiliser ?

Browserify : pourquoi l'utiliser ?

Par Eric Brehault publié 05/12/2014, édité le 25/01/2016
Browserify permet notamment d'utiliser la syntaxe require() de CommonJS dans le navigateur.
Browserify : pourquoi l'utiliser ?

Charger ses dépendances avec require(), c'est pratique

Si vous développez en NodeJS, vous avez l'habitude de charger les modules nécessaires à votre code de cette manière:

var express = require('express');
var mymodule = require('./mymodule');

// ici notre code dépendant de express et de mymodule

Ce qui est une syntaxe très agréable.

Et au-delà de sa simplicité, l'intérêt de cette syntaxe est que Node va aller trouver le module requis en le cherchant dans le path, charger dans la variable ce que le module exporte, et cela sera fait avant qu'on passe à la suite du code. Comportement classique pour des langages backend (comme Python, Java, etc.), mais inespéré pour du Javascript.

Mais cela ne marche pas en Front

En revanche, si vous développez en front, nos navigateurs actuels ne sauront que faire de ce genre d'instructions.

Une des approches connues pour obtenir ce comportement en front est d'utiliser RequireJS qui suit l'approche AMD (Asynchronous Module Definition).

RequireJS permet de définir des modules, de les déclarer dans un fichier de configuration, et ensuite de les utiliser dans notre code de cette manière:

// config
requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app'
    }
});

// notre app.
requirejs(['jquery', 'canvas', 'app/mymodule'],
function   ($, canvas,   mymodule) {
    // ici notre code dépendant de jquery, canvas et mymodule
});

C'est une manière très efficace de gérer nos dépendances, RequireJS nous garantit que les modules en question seront effectivement chargées au moment où notre code sera exécuté. Mais malheureusement la syntaxe est nettement moins légère. 

Browserify choisit la syntaxe CommonJS

Browserify propose une approche différente. Plutôt que d'obtenir au runtime un comportement similaire au require() de CommonJS comme le fait RequireJS, Browserify prend du code conforme à la syntaxe CommonJS et le transforme en un code équivalent mais exécutable dans les navigateurs.

Browserify est donc un traitement qu'on effectue via Gulp (ou Grunt) en même temps que nos autres traitements Javascript habituels (minification, agrégation, traitement des dépendances Bower, etc.).

Son fonctionnement est simple: Browserify prend le code de notre fichier principal (app.js par exemple), et y repère toutes les instructions require(), lit le code correspondant, y repère également les instructions require(), et ainsi de manière récursive, il arrive à tirer toutes les dépendances de notre code, et il produit un fichier unique qui contient tout le code de toutes les dépendances correctement organisé pour que le comportement soit fidèle à ce que require() aurait fait s'il avait été interprétable par notre navigateur.

Le premier avantage dans l'utilisation de Browserify, c'est qu'on va pouvoir appeler certains modules NodeJS dans notre code front.

Au revoir Bower !!

Concernant les dépendances vers des librairies extérieures, Browserify s'attend à les trouver dans le fichier package.json (dans le champ "browser"). Ainsi:

{
  "dependencies": {
    "underscore": "~1.7.0"
  },
  "browser": {
    "underscore": "./node_modules/underscore/underscore.js"
  }

va permettre d'écrire:

var _ = require('underscore');

Note: comme avec RequireJS, on peut ajouter au package.json une section "browserify-shim" pour les dépendances non conformes.

La conséquence intéressante, c'est que maintenant, nous pouvons donc gérer nos dépendances front avec npm, et nous passer de bower. Plutôt qu'avoir deux gestionnaires de dépendances (npm et bower), avec chacun leur fichier de configuration (package.json et bower.json), on n'a plus qu'un gestionnaire et surtout un seul fichier qui va contenir toutes nos dépendances et leurs versions.

Le build d'un projet va donc se limiter à:

$ npm install
$ gulp

En résumé:

  • une belle syntaxe,
  • une gestion des dépendances unifiée,
  • un build simplifié.

Vive Browserify !

Contenus corrélés

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
Découverte de React Native Découverte de React Native 18/04/2016

Présentation de React Native, quelles sont ses possibilités et peut-on l'utiliser en prod ?

Bien démarrer avec Ionic Bien démarrer avec Ionic 07/12/2015

Une ressource pour les développeurs Ionic et ceux qui veulent démarrer dans le développement ...

How to create an Angular library How to create an Angular library 08/02/2017

Having a light and clean distribution AND running tests on Travis, showing demo on Github Pages, ...

Bien gérer le passage au développement front end Bien gérer le passage au développement front end 21/02/2017

Adaptation des équipes à de nouveaux enjeux.

Faire une boucle for dans un template Angular 2 Faire une boucle for dans un template Angular 2 11/07/2016

Quand on n'a pas d'itérable sous la main