Bower, un administrador de paquetes para la web

B

En lo personal, soy una de esas personas que considera que aquel tiempo donde uno guardaba todas las librerias que utilizaba para desarrollar en una carpeta en tu pc, ha terminado, con la aparicion de gestores de paquetes como composer, pip, npm, bower, entre otras, ya no es necesario estar guardando las librerias que encontrabamos en internet como lo haciamos antes.

Recuerdo vaganmente, hace algunos años, cuando tenia en una carpeta de mi equipo llamada Development, librerias como jquery, chartjs, entre algunas otras respaldada con todo y su versión para que cuando fuera necesario utilizarlas las tuviera a la mano. Considero que esos tiempos ya terminaron, y el día de hoy quiero compartirles mi experiencia con bower.
Para aquellos que no lo conozcan, bower es un administrador de paquetes proporcionado dentro de los repositorios de npm que nos permite gestionar nuestras librerias de frontend, por decir un ejemplo, ya que permite gestionar las de node.js, entre algunas más, es decir, con comandos super sencillos como:

bower install jquery

Podemos tener la última versión de jquery en nuestro proyecto sin ningún esfuerzo, y su instalación, es realmente sencilla:

Lo primero que tenemos que tener, antes que nada, es tener instalado el gestor de paquetes NPM (Node Package Manager), este realmente es muy sencillo de instalar, lo único que tenemos que hacer, es entrar al e instalarlo, dentro de la instalación de node, viene incluido el gestor de paquetes NPM.

Una vez que tengamos instalado Node en nuestro sistema, será necesaria la instalación de manera global de bower con:

npm install -g bower

En sistemas operativos como Linux y OSX, será necesario anteponer a este comando la palabra «sudo», para que nos permita la instalación como administrador, una vez que termine la instalación, será la única vez que habremos tenido que instalar bower en nuestro sistema, con esto, lo tenemos listo para utilizar.
Ahora bien, como ejemplo, crearemos una carpeta donde quiera que tengan sus proyectos, vamos a suponer:

Preview Project

Ahora bien, teniendo esto, vamos a navegar a la carpeta de nuestro proyecto desde la consola, y posteriormente introducir el comando:

bower init

Nos hará una serie de preguntas, que será la configuración básica de bower:

name: TestBower
version: 1.0.0
description: test
main file: 
what types of modules does this package expose? globals
keywords: 
authors: Ivan Alvarado
license: GPL
homepage: http://www.ivanalvarado.net
set currently installed components as dependencies? No
add commonly ignored files to ignore list? No
would you like to mark this package as private which prevents it from being accidentally published to the registry? No/N) n
{
  name: 'TestBower',
  version: '1.0.0',
  authors: [
    'Ivan Alvarado'
  ],
  description: 'test',
  moduleType: [
    'globals'
  ],
  license: 'GPL',
  homepage: 'http://www.ivanalvarado.net'
}
Looks good? Yes

Despues de terminar la serie de preguntas anteriores, nos generará un archivo de configuración llamado bower.json con el contenido anterior:

{
  "name": "TestBower",
  "version": "1.0.0",
  "authors": [
    "Ivan Alvarado"
  ],
  "description": "test",
  "moduleType": [
    "globals"
  ],
  "license": "GPL",
  "homepage": "http://www.ivanalvarado.net"
}

Y con esto, tenemos todo listo para comenzar a instalar paquetes, por ejemplo:

bower install jquery

Y esto, nos creará una carpeta llamada bower_components, donde dentro, tendrémos la libreria jquery en su última versión lista para utilizar.

Jquery Installed

Hey!, pero que pasa?… normalmente, yo no utilizo la carpeta bower_components para hacer referencia a mis assets, sino que tengo todas mis librerias dentro de una carpeta public/assets, Ivan, ¿Como hago esto?, fácil, lo único que tenemos que hacer, es crear un archivo llamado .bowerrc junto a nuestro archivo bower.json, con un JSON configurando bower:

{
	"directory" : "public/assets/"
}

Obviamente, hay muchos más parámetros de ocnfiguración, pero ahi si les toca a ustedes revisar la documentación dependiendo del caso de uso, por lo pronto, para mi, esto es suficiente, lo único que tenemos que hacer ahora, es eliminar la carpeta bower_components y crear una carpeta public/assets, y obviamente realizar nuevamente el:

bower install jquery

Y con eso, tendremos una estructura de la siguiente manera:

Bower configurado

Y listo!!, tenemos todo listo para comenzar a desarrollar nuestro proyecto y jalar nuestras librerias, «Pero Oye Iván!!, ¿como se que paquetes puedo instalar desde bower?», ahhh.. ok, se me olvidaba, puedes usar tan fácil como un:

bower search 

O si quieres algo más accesible te vas al sitio de bower y buscas el paquete que gustes, aunque es muy probable que cuando estes en internet, muchas librerias al encontrarlas, dentro de su Get Started, tengan un «Install from bower», y con el comando especifico.
Sinceramente, se me hace un gestor de paquetes excelente, podemos encontrar librerias como angular, bootstrap, y cada una tiene sus dependencias, por ejemplo, si instalamos bootstrap directamente, bootstrap instalará automaticamente jquery por que lo necesita para funcionar.
Y es todo, ojalá les sea de mucha utilidad, un saludo.

Acerca del autor

Ivan Alvarado Diaz

Ingeniero en sistemas computacionales, apasionado por la tecnologia, programador, siempre con ganas de aprender mas y comprometido con mi trabajo.

Categorías

Etiquetas