Gestionando dependencias en front-end con Bower
Bower es un gestor de paquetes . Si alguna vez has usado apt-get , npm , pip o gem , felicidades, ya sabes lo que es un gestor de paquetes.
Lo que hace a Bower diferente del resto es que es un gestor de paquetes para el front-end , algo impensable hasta hace apenas dos años.
Con Bower podemos gestionar cómodamente las dependencias de nuestro proyecto desde la shell . Se acabaron los días en que tenías que ir visitando una por una las webs de tus bibliotecas JavaScript/CSS favoritas para comprobar o descargar la última versión de las mismas.
Por dependencia se entiende cualquier biblioteca, framework o conjunto de archivos susceptible de ser encapsulado como paquete (siguiendo las especificaciones de Bower ). De hecho, aunque la gran mayoría están relacionados con el front-end, se pueden encontrar casi todo tipo de paquetes (¡incluso hasta el código fuente del kernel de Linux !). En principio Bower no impone ninguna restricción en cuanto a la naturaleza de los paquetes, siempre que éstos se alojen en un repositorio Git, como por ejemplo GitHub .
Instalación de Bower
Para instalar Bower necesitamos tener instalado Node.js y Git .
El procedimiento de instalación es el habitual de cualquier paquete de Node:
$ npm install -g bower
Primeros pasos
Bower dispone de los comandos habituales de cualquier gestor de paquetes:
installuninstallsearchlist
Para ver todos los comandos, abre una shell y escribe bower . Para ver más
información sobre un determinado comando escribe bower help <comando> .
Buscando paquetes
Comenzaremos probando el comando search , para buscar paquetes. Vamos a probar
a ver qué encontramos sobre Twitter Bootstrap :
$ bower search bootstrap
Search results:
bootstrap git://github.com/twbs/bootstrap.git
angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git
bootstrap-sass-official git://github.com/twbs/bootstrap-sass.git
sass-bootstrap git://github.com/jlong/sass-bootstrap.git
bootstrap-datepicker git://github.com/eternicode/bootstrap-datepicker.git
bootstrap-sass git://github.com/jlong/sass-twitter-bootstrap
bootstrap-select git://github.com/silviomoreto/bootstrap-select.git
...
Como se puede ver, hay cientos de paquetes que incluyen la palabra “bootstrap”. En este caso el primero de la lista es el que nos interesa, pero puede haber ocasiones en que sea algo engorroso encontrar el paquete que queremos. En esos casos es mejor recurrir al buscador de la web de Bower, ya que incluye opciones para ordenar la lista de resultados, algo que de momento no ofrece el comando search .
Instalando paquetes
Para instalar el paquete bootstrap usamos el comando ìnstall :
$ bower install bootstrap
Esto instalará bootstrap y todas sus dependencias (en este caso sólo jQuery ). Además nos habrá creado un nuevo directorio: bower_components , donde se descargarán todos los paquetes que instalemos. Es recomendable ignorar este directorio en el sistema de control de versiones que estemos usando, por ejemplo añadiéndolo a .gitignore , en el caso de Git.
Por defecto el comando install instala la última versión del paquete. Para instalar una versión concreta escribiríamos:
$ bower <paquete> #<version>
La versión se especifica usando la misma notación de Node.js . La mayoría de paquetes en Bower siguen (o deberían seguir) la especificación Semantic Versioning.
Las versiones disponibles de un paquete, además de otro tipo de información, podemos verlo con:
$ bower info <paquete>
Incorporando Bower a un proyecto
Supongamos que tenemos un proyecto “demo” con el siguiente aspecto:
demo/
├── css/
│ └── main.css
├── img/
│ └── logo.png
├── js/
│ └── main.js
└── index.html
Una de las ventajas de usar Bower es que podemos especificar las dependencias front-end de nuestro proyecto en un archivo especial llamado bower.json (análogo al que se usa en Node.js: package.json ). De esta forma cada vez que vayamos a desplegar nuestro proyecto, sólo tendremos que escribir bower install para que se instalen automáticamente todos los paquetes de Bower.
Con bower.json no sólo estamos indicando las dependencias de nuestro proyecto, sino que estamos creando un paquete Bower . Por ello, el formato de este archivo debe seguir las especificaciones de los paquetes de Bower .
La forma más sencilla de crear el archivo bower.json es mediante el comando bower init , el cual nos guiará paso a paso por todos los campos que necesitamos rellenar. No todos los campos son obligatorios, por lo que si no queremos rellenarlo, sólo tendremos que pulsar enter :
$ bower init
? name: Demo
? version: 0.0.1
? description: Bower demo
? main file:
? what types of modules does this package expose?:
? keywords:
? authors: Sergio Rus sergio@example.com
? license: MIT
? homepage:
? set currently installed components as dependencies?: No
? add commonly ignored files to ignore list?: Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry?: Yes
{
name: 'Demo',
version: '0.0.1',
authors: [
'Sergio Rus sergio@example.com'
],
description: 'Bower demo',
license: 'MIT',
private: true,
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
]
}
? Looks good?: Yes
Especificando las dependencias del proyecto
Supongamos que queremos instalar los paquetes bootstrap , fontawesome y jquery . Ya vimos cómo se instalan paquetes en Bower, pero esta vez además queremos marcarlos como dependencias de nuestro proyecto. Para ello usamos la opción --save :
$ bower install --save bootstrap fontawesome jquery
De esta forma Bower añadirá automáticamente estos paquetes a bower.json :
{
"name": "Demo",
"version": "0.0.1",
"authors": [
"Sergio Rus sergio@example.com"
],
"description": "Bower demo",
"license": "MIT",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap": "~3.3.0",
"jquery": "~2.1.1",
"fontawesome": "~4.2.0"
}
}
Como se puede ver, Bower ha creado una nueva sección: dependencies , donde aparecen los tres paquetes que hemos instalado. La próxima vez que tengamos que desplegar el proyecto, sólo tendremos que escribir bower install , y todas las dependencias se instalarán automáticamente.
Por defecto Bower especifica la versión de cada paquete usando el prefijo ~ . Este símbolo, que forma parte de la notación usada en Node.js , indica a Bower que sólo debe instalar versiones compatibles a nivel de parche , es decir, que sólo corrijan errores y no introduzcan cambios incompatibles con las versiones instaladas actualmente (ver Semantic Versioning). Por ejemplo, en el caso de bootstrap , Bower sólo instalará una versión mayor o igual que 3.3.0 y menor que 3.4.0 .
Finalmente sólo faltaría modificar index.html para añadir las bibliotecas JavaScript y CSS de nuestro proyecto:
<meta charset="utf-8">
<title>Demo</title>
<meta name="description" content="Bower demo">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
Conclusión
Bower es sin duda una herramienta útil y recomendable para cualquier proyecto, sobre todo para aquellos que contienen una larga lista de dependencias front-end.
Su ecosistema no para de crecer con herramientas y una lista de paquetes cada día más numerosa. Eso unido a su facilidad de uso e integración, han hecho que se haya convertido en un componente fundamental de otros proyectos, como Yeoman .
Este artículo es sólo una introducción. En la categoría de cursos de Frontend podrás aprender más sobre estas tecnologías.
