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
How to setup Angular Universal How to setup Angular Universal 29/06/2017

Step by step explanation. All the pitfalls to avoid.

Comment mettre en place Angular Universal Comment mettre en place Angular Universal 29/06/2017

Toutes les étapes détaillées et expliquées. Les pièges à éviter.

SEO : indexing a JavaScript application SEO : indexing a JavaScript application 29/06/2017

How to produce a server-side rendered version of your web application.

SEO : indexer une application Javascript SEO : indexer une application Javascript 29/06/2017

Comment utiliser le code de votre application pour un rendu server-side.

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 ?