Browserify: gestire le dipendenze su JavaScript e Node.js

Con lo sviluppo delle tecnologie Web, realizzare progetti JavaScript di grandi dimensioni è diventato sempre più comune: non è raro, ad esempio, che intere App mobile vengano implementate in HTML5 piuttosto che in modo nativo, per facilitarne la portabilità. Nello stesso modo, intere applicazioni desktop sono oggi rimpiazzate da Web application lanciate all'interno di un qualsiasi browser.

La diffusione dei concetti di programmazione Web e di JavaScript (oggi diffuso anche come linguaggio server grazie a NodeJS) implica la necessità di organizzare, in maniera il più possibile ordinata e manutenibile, i propri script. A tale scopo nasce Browserify, un modulo software che consente di importare più script in modo simile a quello che si fa in Java o PHP con le clausole import o require, per poi unificarli (ed eventualmente comprimerli) con un unico comando.

Browserify può essere facilmente ottenuto scaricandolo dal sito ufficiale, oppure utilizzando npm per l'installazione (e, se utilizziamo NodeJS, questa è l'opzione preferibile).

npm install -g browserify

Immaginiamo, per esempio, di volere scrivere uno script che dipenda da Underscore, un modulo molto popolare che, tra l'altro, possiamo installare con npm:

npm install underscore

Con Browserify, possiamo procedere come segue:

var underscore = require('underscore');
var names = ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
  otherNames = ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
underscore.each([names, otherNames], function(nameGroup) {
  findSuperman(nameGroup);
});
function findSuperman(values) {
  underscore.find(values, function(name) {
    if (name === 'Clark Kent') {
      console.log('It\'s Superman!');
    } else {
      console.log('... No superman!');
    }
  });
}
console.log(unique(data));

Una volta definito uno script come il precedente (che immaginiamo si chiami main.js), è sufficiente utilizzare Browserify per unificarlo con Underscore, con un semplice comando da terminale:

browserify main.js -o output.js

Quello appena visto non è che un esempio delle potenzialità di Browserify. Volendo, nulla impedisce di usare l'output (che è un unico file) anche in una pagina Web, così da utilizzarne i contenuti in un normale browser.

Via Browserify