Todo desarrollador de páginas web, web apps, o de aplicaciones multiplataforma sabe muy bien que la gestión de las dependencias es un trabajo que perfectamente puede llevarnos varias jornadas si queremos tenerlas bien organizadas y sin repeticiones de paquetes. Para facilitarnos éstas pesadas e improductivas tareas, tenemos a Bower. Bower es un gestor de paquetes para el desarrollo front-end que funciona sobre node y git, que nos permite automatizar o semi-automatizar tareas de gestión de dependencias.
Instalación de Bower
Ante de instalar y utilizar Bower se necesita tener, como ya he mencionado, NodeJS, npm (por defecto se instala con Node), y Git. Si no los tienes instalados, y no sabes muy bien cómo hacerlo, sigue las siguientes guías (en inglés): NodeJS,y Git. Una vez que lo tiene todo, hay dos opciones para la instalación de Bower: la instalación global, para utilizar en cualquier punto del sistema, o instalación sólo para el proyecto actual. El siguiente comando instala Bower de forma nivel global:
npm install bower -g
Si queremos que esté disponible solamente sólo para el proyecto actual, simplemente omitimos la opción -g. Ahora ya podremos utilizar Bower para la gestión de las dependencias, vamos a ello.
Buscar, instalar y actualizar dependencias con Bower
Cuando vamos a instalar una dependencia, puede darse el caso de que no sabemos exactamente el nombre de la misma. ¿El paquete se llama bootstrap o bootstrap2? En este caso, debemos buscar primero aportando el parte del nombre del paquete:
bower search <palabra_clave>
Los paquetes que tengan la palabra clave seleccionada, tanto en su título, como en su descripción, o en su lista de keywords, aparecerán listado, de forma que podremos seleccionar el que necesitamos. Otra forma de buscar paquetes disponibles en Bower es mediante la página web de búsqueda, en el siguiente enlace: http://bower.io/search/.
Una vez que sabemos que paquete queremos instalar, podemos obtener información del mismo para conocer qué dependencias tiene, o qué versiones hay disponibles, o bien para leer su descripción por no estar seguros de que se trate del paquete correcto. Para ello utilizaremos el siguiente comando:
bower info <nombre_paquete>
Lo que hace este comando es mostrarnos el contenido del manifiesto Bower del paquete. Después explicaré que es un manifiesto Bower.
Una vez que sabemos exactamente qué paquete es que queremos, así como la versión del mismo, ya podemos instalarlo. Es tan simple como utilizar el comando:
bower install <nombre_paquete>#<versión>
Este comando, si es la primera vez que lo ejecutamos, creará una carpeta bower_components en la raíz de nuestro proyecto, en la que instalará todos los componentes que le vayamos diciendo. Si el paquete seleccionado tiene dependencias, éstas serán instaladas también, y si esas dependencias tienen terceras dependencias, también se instalarán. Si no le indicamos ninguna versión, Bower instala la última disponible (quitar también el símbolo ‘#’, y no pongáis los símbolos ‘<’ y ‘>’, con los nombre de paquetes, por si acaso…).
También es frecuente que aparezcan nuevas versiones de las dependencias que usamos en nuestros proyectos, ya sea que añaden características nuevas, o que solucionan bugs y problemas de seguridad. Actualizar una dependenci suele representar el problema de que pueda ser necesario modificar otras, ya que la nueva versión requiere de versiones diferentes en sus dependencias (todo un lío y un caos, lo sé). Es por eso que muchas veces nos quedamos con la misma librería que teníamos, aun cuando tenga fallos conocidos, hasta que iniciemos un nuevo proyecto, momento en que ya pensamos otra vez en qué versiones necesitamos. Ya sabemos los problemas, que ésto representa: proyectos que si ser acabados ya están obsoletos, fallos de seguridad… Bower nos facilita infinitamente éste proceso de actualización, simplemente, cuando salga una nueva versión de una de nuestras librerías, utilizamos el comando:
bower update <nombre_paquete>
Sólo con ésto, se actualiza el paquete a la nueva versión y mira en su manifiesto para averiguar si tiene algún otro paquete que actualizar. Si queremos actualizar todos los paquetes del proyecto, con no indicar ningún paquete entenderá que lo queremos todo en la última versión compatible.
Para eliminar alguna dependencia (instalada por error, o por cambio de tecnología) sólo la indicamos con el siguiente comando:
bower uninstall <nombre_paquete>
También podemos consultar los paquetes instalados y sus versiones, pudiendo ver a su lado la última versión disponible:
bower list
Hágalo fácil con un manifiesto Bower
Es un hecho bien conocido, que el trabajo de un desarrollador se realiza al 90% utilizando las mismas herramientas una y otra vez. Seguro que casi siempre utilizas las mismas dependencias en tu trabajo: bootstrap, angular u otro framework JavaScript… Instalar las mismas librerías cada vez que inicia un proyecto será ya casi una rutina. Una rutina dura y larga, que siempre nos lleva mucho tiempo y podemos hacer algo mal. Así mismo, puede convertirse en un rollo ejecutar siempre los mismos comandos. Para arreglar ésto, Bower utiliza los manifiestos (¡alto linuxeros! ¡ésta vez no necesitáis un script! =P). Un manifiesto Bower es un fichero json que almacena la información de los paquetes que necesitamos y sus versiones. Así mismo, las dependencias pueden ser “de desarrollo”, innecesarias en el paquete final para el lanzamiento del producto (dev-dependencies). El manifiesto se encarga de todo ello, y también nos permite añadir una descripción, un tipo de licencia, un nombre… Es sí, que se llame bower.json siempre, ya que es lo que buscará bower al ejecutarse. Podemos crearlo a mano con cualquier editor de texto, utilizando estas especificaciones. Pero también lo puede crear y actualizar por nosotros. Para crear desde 0 un nuevo manifiesto, ejecutaremos:
bower init
Este comando nos preguntará varios datos del proyecto antes de crear el fichero: nombre (del manifiesto), descripción, fichero main, tipo de ficheros (no he utilizado ésta característica), keywords, autores, licencia, página de inicio, si queremos que ponga en el manifiesto los paquetes que ya están instalados antes de su creación, incluir los paquetes comúnmente ignorados, y si queremos que se marque como privado. A continuación nos enseña el resultado y nos pide confirmar si está todo bien.
Para añadir paquetes extra después de la creación, actualizar en el manifiesto los paquetes que actualicemos en el proyecto, o desinstalar paquetes que desinstalamos del proyecto, solo tenemos que añadir la opción –save o -S (mayúscula, ojo). Pasa añadirlos como dependencias de desarrollo (compresores de CSS, tests, etc.), usamos la opción –save-dev o -D. Pero otra opción es que modifiquemos el fichero con cualquier editor en cualquier momento, realizando todo ésto de forma manual. Ésto puede ser útil para iniciar un nuevo proyecto con un manifiesto que ya tenemos creado pero al que queremos realizar pequeñas modificaciones. Para iniciar este mismo proyecto, simplemente, ejecutamos:
bower install
Al no indicar nombre de paquete, nos buscará un fichero bower.json en el que basarse para instalar todo lo que haya indicado en el. Si no lo encuentra mostrará un error.
Más información
Hasta aquí tenéis el 95% del uso que haréis de Bower como desarrolladores. Sin embargo, puede ser que queráis aprender habilidades más avanzadas. En ese caso, os dejo los siguientes enlaces para que podáis investigar por vosotros mismos (en inglés todos):
- Referencia de la API de Bower con todos los comandos, las opciones y más: http://bower.io/docs/api/
- Creación y registro de paquetes Bower: http://bower.io/docs/creating-packages/
- herramienta web para buscar paquetes: http://bower.io/search/
- Otros tutoriales varios de Bower: https://github.com/bower/bower/ wiki / Bower-Tutoriales
El artículo Bower, un gestor de dependencias inteligente apareció por primera vez en Instinto Binario.