Ver contenido
carlosazaustre.es carlosazaustre.es

Browserify. Desarrollando tu Frontend como en Node.js

🗓 | 💻 Desarrollo | 🕐 2 minutos de lectura | 💬 Comments

Browserify es una librería de Node.js, escrita por substack, uno de los mayores contribuidores al core de Node.js y con mayor número de módulos publicados en NPM.

{<1>} browserify

Nos permite escribir código JavaScript del cliente, como si estuviésemos programando en Node.js, es decir, como por ahora no tenemos módulos de forma nativa en JavaScript (hasta que se implante el estándar ECMAScript6 que si los trae) hay librerías que se encargan de imitar ese comportamiento (Caso de Require.js hace un tiempo).

Con esta librería, podemos instalar módulos para el cliente, con NPM, al igual que hacíamos con bower, pero ahora, podemos llamarlos desde nuestro código con la palabra reservada require, al igual que en Node.js

Y también nos permite tener un sólo archivo .js en el cliente, ya de inicio, olvidándonos de tener que importar todas las librerías y scripts utilizados en el HTML con <script src="..."></script y luego tener que concatenar etc...

También nos permite crear nuestros propios módulos con module.exports y llamarlos de nuevo desde nuestro código con require.

En este artículo vamos a ver como sería un ejemplo sencillo utilizando una libreria externa como jQuery instalada a través de NPM, y como crear nuestro propio módulo y utilizarlo dentro de nuestra aplicación. Para todo ello emplearemos Node.js como servidor y Gulp con algunos plugins para automatizar el proceso.

Configuración de Gulp

Instalamos los siguientes módulos y plugins para automatizar algunas tareas.

Esta será la tarea que crea el fichero bundle.js donde está el codigo fuente completo de la parte cliente, ya traducido para que funcione en el navegador, ya que los navegadores no entienden los require ni los module.exports.

El fichero principal dentro de nuestros fuentes es app.main.js, desde ahí se llama al resto de modulos y librerías externas utilizadas y el metodo bundle() lo compila.

Con buffer() del plugin vinyl-buffer y source() del plugin vinyl-source-stream conseguimos poder utilizar el fichero bundle.js generado para aplicarle un uglify o lo que se nos ocurra. Si le aplicacamos uglify despues del bundle() dará error porque por asincronía, aún no ha sido generado el fichero cuando queremos acceder a el.

Instalando librerías para el Frontend con NPM

Ahora vamos a Instalar librerías cliente desde NPM, Node Package Manager, el repositorio de módulos de Node.js.

Para instalar por ejemplo, la librería de jQuery, lo hacemos de la siguiente manera:

En nuestro index.html (ya sea servido por Node.js, Apache, Nginx, etc) debe incluir el script bundle.js generado por Browserify

Además para este ejemplo, hemos añadido un h1 con el texto Hola Mundo.

Ahora pasamos a nuestro código fuente JavaScript, el fichero app.main.js llamará al módulo de jQuery con require('jquery') y podremos usarlo.

Este script únicamente buscará el elemento h1 y cambiará su texto por Hello Browserify

El resultado que veremos en el navegador será el siguiente: {<2>} hola browserify

Para conseguir este resultado, hay que correr las tareas que hemos configurado en el Gulpfile.js

Integrando nuestros propios módulos

Voy a crear un fichero app.persona.js como módulo para ver como se exportaría e importaría en nuestra aplicación con browserify

Exportamos la variable Persona como módulo, y que devuelve 2 funciones, saludar y presentar, que son las únicas que podremos utilizar cuando las llamemos desde app.main.js

Importamos el módulo recien creado con require('./app.persona') indicándole la ruta donde está el archivo.

Creamos un objeto persona en la variable carlos, le pasamos los parámetros Carlos y 30 como nombre y edad. y llamamos a las funciones saludar() y presentar() que mostrarán una alerta JavaScript como las siguientes:

saludar

presentar

De esta manera, con Browserify, podemos programar el JavaScript del Frontend como en el backend con Node.js, pudiendo incluso utilizar librerías no disponibles para el navegador. Y además compilar todo en un único fichero y no tener que enlazar los scripts en el HTML, salvo el bundle.js

chuck-norris-aproved

En el siguiente enlace tienes acceso al código utilizado en este ejemplo, para que lo puedas testear.

github.com/carlosazaustre/browserify-example

✎ ¿Ves alguna errata? ¿Quieres modificar algo? Haz una Pull Request.

Carlos Azaustre

Soy Carlos Azaustre. Desarrollador web desde hace más de 8 años. He trabajado en Google, IBM y Eventbrite. Soy GDE (Google Developer Expert) en Tecnologías Web. Desde 2013 intento documentar en éste blog todo lo que aprendo y así compartirlo con el resto de la comunidad.

📬 Únete y ponte al día en desarrollo web

Recibe puntualmente información sobre las últimas novedades en tecnologías web y desarrollo web moderno para que estés siempre actualizadx:

🔒 Libre de Spam. Sólo contenido que te interesa..