
Browserify te permite implementar módulos en el lado del cliente muy familiar a lo que hace Node.js. Puedes exportar módulos o requerir de ellos en diversos archivos. Ademas nos permite utilizar módulos del core de Node.js y demás módulos que se encuentra en NPM.
Instalación
Para empezar tenemos que instalar Browserify de manera global:
Código :
npm install -g browserify
Como un pequeño ejemplo, generaremos un archivo suma.js con el siguiente código:
Código :
var suma = function(a,b){ return a + b } module.exports = suma
Despues crearemos un archivo main.js, que contendrá lo siguiente:
Código :
var suma = require('./suma.js'); console.log(suma(2,3));
En nuestra consola, nos dirigimos a la carpeta de el proyecto en la cual tenemos nuestros archivos y escribiremos lo siguiente
Código :
browserify main.js > bundle.js
Este comando creara un archivo bundle.js incluyendo el contenido de suma.js y main.js listo para usarse.
Lo que tenemos que hacer es agregar bundel.js a nuestro archivo index.html
Código :
<html> <head> <title></title> <script charset="utf-8" src="bundle.js"></script> </head> <body> </body> </html>
Abrimos la consola de nuestro navegador y veremos el resultado de la operación.
Agregando como dependencias: Jquery, Underscore y Backbone
Si queremos agregar alguna dependencia como Jquery, Underscore, o Backbone, lo que tenemos que hacer es ir a nuestra terminal e instarlos usando NPM:
Código :
npm install jquery backbone underscore --save
Esto nos deberá de generar una carpeta node_modules donde se encontraran las librerías que bajamos, si queremos agregarlas en el archivo
Código :
main.jsharemos lo siguiente
Código :
var $ = require('jquery'); var _ = require("underscore") var Backbone = require('backbone'); Backbone.$ = $;
Lo que hace browserify es buscar los módulos en la carpeta de node_modules igual que lo hace Node.js.
Ahora ya tenemos jquery, underscore y backbone en nuestro archivo, solo que tenemos un inconveniente, de esta forma solo están disponibles en nuestro archivomain.js y si quisiéramos utilizarlos en nuestro archivo suma.js o en cualquier otro archivo tendríamos que escribir siempre las mismas 4 lineas para poder hacer uso de ello

Código :
window.$ = require('jquery'); window._ = require("underscore") window.Backbone = require('backbone'); Backbone.$ = $;
Ahora tenemos accesos a ellas de manera global y si queremos hacer uso de ellas en algun otro archivo solo tendremos que escribir $, _ o BacKbone
Para probarlo haremos un pequeño ejemplo consumiendo un API, creamos un archivo PaisesController.js con el siguiente código:
Código :
module.exports = Backbone.Collection.extend({ url: 'http://restcountries.eu/rest/v1/all' });
También crearemos un archivo para las vistas que se llamara PaisesView.js con el siguiente código:
Código :
module.exports = Backbone.View.extend({ tagName:'p', initialize:function() { this.template = _.template($("#paisTemplate").html()); }, render: function() { var data = this.model, html = this.template(data); this.$el.html(html); } });
Y nuestro archivo main.js lucirá así:
Código :
window.$ = require('jquery'); window._ = require("underscore") window.Backbone = require('backbone'); window.bluebird = require("bluebird"); Backbone.$ = $; var PaisesController = require("./PaisesController.js"); var PaisesView = require("./PaisesView.js"); var paises = new PaisesController(); paises.fetch() .then(function(data){ data.forEach(function(pais){ var view = new PaisesView({model:pais}) view.render(); view.$el.appendTo("#paises"); }); });
Como podrán observar, se utiliza la librería bluebird para implementar promesas, pera un no la tenemos en nuestros módulos, para eso haremos lo siguiente en nuestra consola:
Código :
npm install bluebird --save
Ahora modifiquemos nnuestro archivo {b]index.html{/b]
Código :
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="paises"> </div> <script charset="utf-8" src="bundle.js"></script> <script type="text/template" id="paisTemplate"> Pais:<%=name%>, Capital:<%=capital%> </script> </body> </html>
Esto nos presentara una lista de países con su capital.
Ahora para que nuestro archivo bundle.js este listo, tendremos que poner en nuestra consola el comando de browserify:
Código :
browserify main.js > bundle.js
Usando Grunt para automatizar Browserify
Cada vez que hagamos un cambio en nuestros archivos tendremos que correr este archivo manualmente

Código :
npm install -g grunt-cli
Código :
npm install grunt-contrib-watch --save-dev npm install grunt-browserify --save-dev
Y nuestro archivo Gruntfile.js se vera así:
Código :
module.exports = function (grunt) { grunt.initConfig({ watch:{ scripts:{ files:['./main.js'], tasks: ['browserify'], } }, browserify:{ client: { src: ['./main.js'], dest: './bundle.js', } } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-browserify'); grunt.registerTask('default',['watch']); }
Ahora solo tendremos que correr en nuestra terminal:
Código :
grunt -v
Y listo, grunt hará el trabajo por nosotros cada vez que hagamos un cambio .

Bien ahora ya tenemos una aplicación funcionando usando browserify ,jquery , underscore backbone y bluebird y ademas un archivo de grunt corriendo nuestra tarea, espero les sea de ayuda

Si quieres consultar el código, este es el repositorio: Github del Ejemplo
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por phoenix92 el 03 de Enero de 2015
Por jordano_p el 20 de Enero de 2015
Por opinion el 21 de Enero de 2015