Browserify

La documentation est accessible sur http://browserify.org.

Pour démarrer regarder la vidéo : Tuto sur youtube ou ce tuto en français BROWSERIFY ALL THE THINGS sur le site putaindecode

1. Suppose que le code soit écrit sous “forme modulaire”
2. Installer nodejs qui inclut npm. Il existe un installer windows à l'adresse https://nodejs.org/en/ donc c'est très simple!
3. Installer Browserify en ligne de commande (-g installation global)

   npm install -g browserify

J'écris mon fichier js principal main.js avec une dépendance à maClass.js. Par exemple :

  var MaClass = require ("./maClass.js");
  var color = "#ffff00";
  var uneClass = new MaClass(color);

Je crée ma classe (un peu tordue) dans le fichier maClass.js

// maClass.js
  // J'ajoute les dépendances de ma classe si il y en a
  // par exemple jquery (ne pas oublier d'installer le package)
  var $ = require("jquery");
  function MaClass(color){
       this.color = color;
       this.paint  = function(){
           $("body").css("backgroundcolor",this.color);
       }
       return this;
  }
  module.exports = MaClass;

Et en ligne de commande, avec browerify je crée mon fichier compilé dist.js

browserify main.js -o dist.js

J'ai alors tout mon javascript dans cet unique fichier.

Les packages disponibles sont visualisables sur https://www.npmjs.com/.

Pour obtenir jquery , par exemple, et l'installer dans mon répertoire local, il suffit de taper en ligne de commandes :

npm install jquery --save

Est alors créé un dossier node_modules, contenant un dossier jquery avec les sources de jquery.

Lorsqu'on utilise des modules externes, il est préférable de créer un fichier package.json avec celles-ci. Pour plus de détails sur le contenu possible de package.json voir http://browsenpm.org/package.json

{

    "name": "mon-app",

    "version": "0.1.0",

    "dependencies": {

        "jquery": "~11.2"

    }

}

Ici on a juste une dépendance à jquery version supérieure ou égale à la 11.2. On peut alors mettre à jour avec les dernières versions avec un npm update

---

— Elisabeth Pointal 23/02/2016 19:45