/ Bower

Manejando librerías JavaScript con Bower.io

Cuando desarrollamos aplicaciones JavaScript, tenemos que hacer uso de varias librerís de terceros. Ya no sólo se vive de jQuery, tenemos Backbone, Underscore, Require, librerías de templates como Mustache, y un largo etcétera.

Lo más habitual es bajarse la librería desde la página oficial del proyecto o desde GitHub. Otra opción es usar un CDN. Pero todo esto implica que dejemos nuestro espacio de trabajo y vayamos a la web en cuestión para descargar la librería que necesitamos. Con Bower esto se puede hacer de una forma más sencilla. Veamos como.

Bower IO

Bower es un proyecto open-source salido de Twitter. Funciona de forma parecida a NPM en Node.js. En un fichero JSON anotamos las librerías que necesitamos y con un simple comando se nos descargarán en el directorio que queramos de nuestra aplicación.

Como casi todo lo que comento en este blog, necesitamos Node.js instalado en nuestro equipo, si aún no lo tienes en esta entrada lo explico. Una vez instalado necesitamos instalar Bower de manera global, eso lo conseguimos con

$ sudo npm install -g bower

Después, en el directorio principal de nuestro proyecto creamos un fichero bower.json en el cual indicamos el nombre de nuestra aplicación, versión y las librerías que necesitamos. Sería algo tal que así

{
	"name": "MiApp",
	"version": "0.0.1",
	"dependencies": {
		"normalize-css": "*",
		"modernizr": "*",
		"jquery": "~2.0.2",
		"underscore": "*",
		"backbone": "*",
		"requirejs": "*",
		"mustache": "*"
	}
}

En este caso vamos a emplear las librerías JS Modernizr, jQuery (versión 2.0.2), Underscore, Backbone, Require y Mustache. Al poner el * se nos bajará automáticamente la última versión disponible.

Ahora necesitamos indicar en que directorio queremos que se queden guardados, eso lo conseguimos con otro fichero JSON con nombre .bowerrc el cual tendría el siguiente formato:

{
	"directory": "public/vendor",
	"json": "bower.json"
}

Esto le indica a bower que almacene las librerías descargadas en el directorio /public/vendor de nuestro proyecto.

Por último, para que esta magia haga su función, ejecutamos el siguiente comando en el terminal:

$ bower install

Y ya tendremos nuestras librerías descargadas y listas para usar en nuestro proyecto.

Carlos Azaustre

Carlos Azaustre

CTO y Cofundador de Chefly. Formador en tecnologías web: JavaScript, Node, Firebase, React y Vue.

Leer más