La herramienta browserify ya existe desde hace algunos años, pero realmente no me di cuenta hasta que comencé a desarrollar con node.js. Fue entonces cuando aprecié la agilidad y el poder que conlleva escribir JavaScript modular.
Browserify se puede usar en cualquier aplicación web, independientemente del idioma del lado del servidor, y en este consejo rápido, le mostraré cómo puede usarlo para modularizar su código, al tiempo que demuestro algunos de los beneficios que vienen con él.
Primero, ¿qué es un módulo?
La idea básica detrás de un módulo es que es una pieza de código aislada y arbitrariamente compleja. Puede o no incluir otros módulos, y exporta explícitamente objetos o funciones al código que lo incluye. Esto es mejor que simplemente dividir su fuente en archivos js separados e incluirlos en etiquetas de secuencias de comandos, porque los módulos le permiten reutilizar el código de formas que de otro modo no serían posibles, no contaminan su alcance global y son más fáciles de probar. Vea más beneficios aquí.
JavaScript no tiene (todavía) una forma nativa de definir módulos, por lo que la comunidad intervino e inventó varias formas de hacerlo. Las dos más populares son la especificación CommonJS, que utilizan node.js y browserify, y AMD, que utilizan bibliotecas asíncronas como require.js.
En este artículo, hablaremos sobre CommonJS y browserify.
¿Qué es browserify?
Los navegadores web no pueden cargar módulos CommonJS directamente, ya que requeriría que toda la página se congelara mientras se descarga un módulo, lo que sería una experiencia horrible para los usuarios. Browserify es una utilidad que le permite escribir su JavaScript como si los módulos fueran compatibles con el navegador, y cuando llega el momento de implementar, compila su código junto con los módulos que ha usado en un solo archivo js que incluye como un script en tu página.
Con browserify puede modularizar fácilmente sus aplicaciones, y lo que es aún mejor, le permite usar todas esas maravillosas bibliotecas escritas para node.js de la misma manera.
Instalarlo
Para usar browserify, debe tener instalados node.js y npm. He escrito algunas instrucciones aquí. Luego, debe instalar browserify y, opcionalmente, minify, para que pueda reducir el tamaño de sus archivos js. Escriba estos comandos en su terminal/símbolo del sistema:
npm install -g browserify minify
Esto obtendrá los paquetes y configurará los comandos browserify y minify para usted.
Un ejemplo rápido
Escribamos una pequeña aplicación modular, que cargue un archivo JSON con películas a través de AJAX y permita a los usuarios comprar boletos de cine escribiendo comandos en las herramientas de desarrollo de su navegador. Para demostrar cómo funciona Browserify con las bibliotecas, incluiré la biblioteca superagent AJAX.
Para instalar superagent, escriba este comando en su terminal:
npm install superagent
Esto descargará los archivos de la biblioteca y todos los demás paquetes dependientes. Muchas bibliotecas del lado del cliente están disponibles en npm, incluido jQuery. Entonces, además de los otros beneficios que le brinda browserify, también será mucho más fácil obtener y descargar bibliotecas de la red.
¡Ahora estamos listos para escribir un código real! El primer archivo que escribiremos es un módulo que define los métodos comunes que utilizarán los usuarios de nuestra aplicación de cine.
activos/js/api.js
module.exports = function(global, movies){
var tickets = [];
global.showMovies = function(){
movies.forEach(function(m){
console.log(m.id + ') ' + m.name + ' | $' + m.price.toFixed(2));
});
};
global.buyTicket = function(id){
id = id || 0;
id -= 1;
if(movies[id] !== undefined){
tickets.push(id);
console.log('You bought a ticket for "' + movies[id].name + '"!')
}
else{
console.error('No such movie!');
}
};
global.showTickets = function(){
tickets.forEach(function(id){
console.log('Ticket for "' + movies[id].name + '" | $' + movies[id].price.toFixed(2));
});
};
global.totalCost = function(){
var total = 0;
tickets.forEach(function(id){
total += movies[id].price;
});
console.log('You have to pay $' + total.toFixed(2));
};
}
Este módulo exporta una función, que toma un objeto y una matriz de películas como argumentos. Como verá en nuestro programa principal, buscaremos la matriz a través de ajax y el objeto global se establecerá en window . He optado por no referirme a window directamente en este módulo, porque recibirlo como argumento hará que sea más fácil reutilizar el código en otra situación (o en el lado del servidor, si estamos usando node.js).
Aquí está el archivo principal:
activos/js/main.js
// Require the superagent library
var request = require('superagent');
// Require our own module
var api = require('./api.js');
// Send a GET AJAX request
request('assets/movies.json', function(res){
if(res.ok){
// Initialize the API
api(window, res.body.movies);
}
else{
throw new Error('An AJAX error occured: ' + res.text);
}
}); Debido a que los navegadores no admiten módulos de forma nativa, necesitamos browserify para convertir este código en un solo archivo para nosotros. Esto se puede hacer con los siguientes comandos:
browserify assets/js/main.js > assets/js/include.js minify assets/js/include.js assets/js/include.min.js
El primer comando compilará tu main.js archivo a include.js . El último archivo contendrá su código junto con todos los módulos que utilice. El segundo comando lo minimiza (elimina los espacios en blanco, los comentarios y cambia el nombre de las variables) para reducir el tamaño del archivo de la secuencia de comandos y acelerar la descarga.
He proporcionado un script de shell - build.sh , que puede ejecutar bajo Unix/Linux/OSX con este comando:
bash build.sh
Si está ejecutando Windows, probablemente podría crear un archivo por lotes con el mismo contenido y ejecutarlo desde el símbolo del sistema.
Todo lo que queda es agregar el include.min.js archivo a su página:
de index.html
<script src="assets/js/include.min.js"></script>
Puedes ver el movies.json y los otros recursos en el archivo zip descargable, vinculado desde el botón de arriba.
¡Hemos terminado!
Esto concluye el consejo rápido de hoy. ¡Espero que hayas encontrado útil nuestro pequeño experimento y que comiences tu aventura en la tierra del JavaScript modular!