Creando una biblioteca front-end con Node.js: Herramientas de desarrollo y Browserify


En el post anterior expliqué cómo crear un módulo de Node.js desde cero. Dicho módulo no era más que un script para convertir un query string en un objeto, y va a servir para manejar los estados de una app: al cargar una página web necesitamos obtener los datos que se envían a través del query string.

Ahora, necesitamos instalar algunas herramientas (todas requiren Node.js) que nos facilitarán el desarrollo front-end.

Definiendo dependencias con package.json

Las herramientas que utilizaremos son Browserify, Gulp y Mocha, las cuales son módulos de Node.js y se encuentran disponibles en el repositorio NPM. Este repositorio contiene módulos para Node.js, así como para desarrollo front-end (a inicios de año jQuery recomendó publicar plugins de jQuery en NPM).

Pues bien, para usar estos módulos tenemos dos caminos: Instalarlos globalmente o para un proyecto. Instalar globalmente significa que el módulo podrá ser utilizado en cualquier carpeta de la computadora en la que trabajemos, mientras que sí es solo para un proyecto, solo estará disponible para ese proyecto.

Personalmente, considero que instalar los módulos por proyecto es mucho mejor, ya que permite saber cuál es nuestro stack: qué herramientas necesitamos instalar para poder trabajar en un proyecto.

Para esto, necesitamos crear un archivo package.json, el cual tendrá información sobre la aplicación (muy parecido al package.json que creamos para el módulo from-query-string), pero además guardará la información de los módulos que instalemos.

Para instalar un módulo de NPM debemos utilizar el comando npm install nombre_modulo --save-dev. Esto permitirá instalar el módulo en una carpeta llamada node_modules, y agregará una propiedad llamada devDependencies dentro del package.json. Esta propiedad es un objeto que va a contener todos los módulos instalados con la opción --save-dev. Revisa el archivo README.md para ver cómo se instalan las tres herramientas que usaremos.

Convirtiendo módulos de Node con Browserify

Ahora que ya tenemos instalados las tres herramientas podemos empezar a programar. Como primer paso, debemos crear un archivo que utilice el módulo from-query-string, y lo llamaremos app.js:

En este archivo utilizamos el método require() para llamar a nuestro módulo from-query-string. Usualmente los módulos se llaman con require(‘nombre_modulo’), pero en este caso, hay un “./” al inicio. Esto es debido a que el módulo from-query-string no ha sido instalado con npm install, si no que se encuentra en la misma carpeta que nuestro archivo app.js, por lo que diferenciamos de otros módulos sí instalados llamándolo como una ruta relativa.

Como instalamos Browserify dentro del proyecto, necesitamos ejecutarlo usando la ruta completa del comando, el cual se encuentra en ./node_modules/.bin/browserify. Este comando toma 3 parámetros: El nombre del archivo que se quiere convertir; la opción -o, que indica que todo lo que le sigue es la ruta de destino; y la ruta de destino.

Así, el comando quedaría de la siguiente forma:

./node_modules/.bin/browserify app.js -o bundle.js

Esto creará un archivo bundle.js, el cual ya puede ser usado directamente en el navegador (abre la consola de tu navegador y haz click en el botón de play para ver el resultado):

En el siguiente post hablaré sobre Gulp y cómo se puede integrar con Browserify, para evitar tener que ejecutar comandos largos en la terminal.