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
, para resolverlo podemos hacer lo siguiente: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
.Pero no se preocupen, podemos resolverlo utilizando grunt, para eso tendremos que tener instalado grun y ademas instalar: grunt-contrib-watch y grunt-browserify: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