LearnGetting Started with Bower

Ahora hay más bibliotecas y frameworks disponibles para el desarrollo front-end que nunca. No es raro tener cinco o más de estas bibliotecas involucradas en un solo proyecto. Pero hacer un seguimiento de todas estas bibliotecas y asegurarse de que están actualizadas puede ser complicado. Entra en escena Bower, un gestor de paquetes que facilita la gestión de todas las dependencias del front-end de tu aplicación.

En esta entrada del blog vas a aprender a ponerte en marcha con Bower. Comenzarás instalando la utilidad de línea de comandos de Bower y luego pasarás a aprender sobre los diversos comandos que están disponibles para la gestión de paquetes.

¡Comencemos!

Instalación de Bower

Bower se puede instalar utilizando npm, el gestor de paquetes de Node. Si aún no tienes npm instalado, dirígete al sitio web de Node.js y descarga la copia pertinente de Node.js para tu sistema. El programa npm se incluye con la instalación de Node.js.

Una vez que tengas npm instalado, abre el Terminal (o el Símbolo del sistema) e introduce el siguiente comando:

npm install -g bower

Esto instalará Bower globalmente en tu sistema.

Ahora que tienes Bower instalado, podemos empezar a ver los comandos que se utilizan para gestionar los paquetes.

Búsqueda de paquetes

Hay dos formas diferentes en las que puedes encontrar los paquetes de Bower. Ya sea utilizando el directorio de componentes en línea, o utilizando la utilidad de línea de comandos.

Para buscar paquetes en la línea de comandos se utiliza el comando search. Esto debe ser seguido por su consulta de búsqueda.

bower search <query>

Por ejemplo, para buscar paquetes que contengan la palabra ‘jquery’ podría hacer lo siguiente:

bower search jquery

Este comando devolvería un montón de resultados, algunos de los cuales se muestran en el fragmento de abajo.

Cada resultado muestra el nombre del paquete y un punto final Git. Necesitarás el nombre o el endpoint Git para instalar un paquete.

Instalación de paquetes

Para añadir un nuevo paquete Bower a tu proyecto se utiliza el comando install. A este se le debe pasar el nombre del paquete que deseas instalar.

bower install <package>

Además de usar el nombre del paquete, también puedes instalar un paquete especificando uno de los siguientes:

• Un endpoint Git como git://github.com/components/jquery.git
• Una ruta a un repositorio Git local.
• Un endpoint abreviado como components/jquery. Bower asumirá que se está utilizando GitHub, en cuyo caso, el punto final es la parte que sigue a github.com en la URL del repositorio.
• Una URL a un archivo zip o tar. El contenido de los archivos se extraerá automáticamente.

Puede instalar una versión específica del paquete añadiendo un signo de libra (#) después del nombre del paquete, seguido del número de versión.

bower install <package>#<version>

Los paquetes instalados se colocarán en un directorio bower_components. Este se crea en la carpeta en la que se ejecutó el programa bower. Puede cambiar este destino utilizando las opciones de configuración en un archivo .bowerrc.

• bower_components
  • jquery
    • jquery.js
    • jquery.min.js
    • jquery.min.map
    • …
  • modernizr
    • modernizr.js
    • …

Una vez instalado, puede utilizar un paquete simplemente añadiendo una etiqueta <script> o <link> a su marcado HTML. Aunque los paquetes Bower suelen contener archivos JavaScript, también pueden contener CSS o incluso imágenes.

<script src="https://blog.teamtreehouse.com/path/to/bower_components/jquery/jquery.min.js"></script>

Instalación de paquetes usando un archivo bower.json

Si estás usando varios paquetes dentro de tu proyecto, a menudo es una buena idea listar estos paquetes en un archivo bower.json. Esto le permitirá instalar y actualizar múltiples paquetes con un solo comando.

{ "name": "app-name", "version": "0.0.1", "dependencies": { "sass-bootstrap": "~3.0.0", "modernizr": "~2.6.2", "jquery": "~1.10.2" }, "private": true}

El sencillo ejemplo anterior muestra un archivo bower.json que define alguna información sobre los proyectos así como una lista de dependencias. El archivo bower.json se utiliza en realidad para definir un paquete Bower, por lo que en efecto usted está creando su propio paquete que contiene todas las dependencias para su aplicación.

Las propiedades utilizadas en este ejemplo se explican a continuación.

• name – El nombre de su aplicación/paquete.
• version – Un número de versión para su aplicación/paquete.
• dependencies – Los paquetes que son requeridos por su aplicación. Debe especificar un número de versión para cada uno de estos paquetes como se muestra en el ejemplo anterior. Especificar latest, hará que Bower instale la versión más reciente de un paquete.
• private – Establecer esta propiedad a true significa que quieres que el paquete permanezca privado y no deseas añadirlo al registro en el futuro.

Una vez que tengas tu archivo bower.json configurado puedes simplemente ejecutar el comando bower install para instalar todos los paquetes que hayas especificado.

Bower incluye una práctica utilidad que te ayudará a crear un archivo bower.json para tu proyecto. Ejecutando el comando bower init en la raíz de tu proyecto se lanzará un programa interactivo que creará el archivo por ti. Sin embargo, es posible que tenga que añadir algunos paquetes al archivo usted mismo.

Nota: Para una lista completa de las propiedades que se pueden añadir a su archivo bower.json consulte la especificación.

Listado de paquetes instalados

Puede averiguar fácilmente qué paquetes están instalados utilizando el comando list.

bower list

El fragmento de abajo muestra la salida para un proyecto simple que utiliza jQuery, Modernizr y Sass. Observe que Bower también hace una comprobación para ver si hay una versión más nueva de cada uno de los paquetes.

Actualización de paquetes

Actualizar un paquete es bastante sencillo. Si ha utilizado un archivo bower.json puede ejecutar un simple comando update para actualizar todos los paquetes a la vez. Sin embargo, la herramienta de actualización respetará las restricciones de versión que haya especificado en el archivo bower.json.

bower update

Para actualizar un paquete individual, vuelva a utilizar el comando update, esta vez especificando el nombre del paquete que desea actualizar.

bower update <package>

Desinstalación de paquetes

Para eliminar un paquete puede utilizar el comando uninstall seguido del nombre del paquete que desea eliminar.

bower uninstall <package>

Es posible eliminar varios paquetes a la vez enumerando los nombres de los paquetes.

bower uninstall jquery modernizr sass-bootstrap

Pensamientos finales

Los gestores de paquetes han revolucionado la forma en que compartimos el código. Han hecho que el uso de las bibliotecas de código sea más fácil que nunca, y han eliminado gran parte del dolor de cabeza que suponen las actualizaciones.

Durante mucho tiempo los desarrolladores de front-end miraban a proyectos como RubyGems con envidia; deseando que algún día nosotros también tuviéramos una forma directa de gestionar las dependencias de los proyectos. Bower nos ha proporcionado esa herramienta. A medida que las grandes bibliotecas se convierten en algo común entre nuestras aplicaciones web, la complejidad de nuestros proyectos aumentará inevitablemente. Bower nos proporciona una forma de gestionar esta complejidad.

Enlaces útiles

• Bower
• Repositorio GitHub de Bower
• Directorio de componentes de Bower

• bower
• code
• javascript
• web app