Bower gestor de paquetes frontend


Bower gestor de dependencias web

En la actualidad el desarrollo Frontend a crecido considerablemente y prueba de ello es el numero de librerías que utilizamos en nuestros proyectos, si nos ponemos a analizar cuantas son?, cada cuando sale una versión estable? (actualización) y tratar de mantener en nuestra aplicación la ultima versión de estas, realmente seria algo muy tedioso y mucho tiempo invertido.

Ahora imaginen hacer todo lo anterior pero para todos nuestros proyectos, seria una tarea de tiempo completo, por fortuna, podemos automatizar esta tarea con ayuda de Bower, un gestor de dependencias Frontend que nos ayudara a instalar, actualizar o eliminar estas dependencias en nuestro proyecto.

Que es bower?

Bower es un gestor de dependencias creado por Twitter al estilo de NPM para NodeJS, pero a diferencia de este, las dependencias están enfocadas al desarrollo Frontend como por ejemplo JQuery, Bootstrap, Materialize que se encuentran entre las mas populares, entonces, bower nos ayudara con la instalación, actualización de las mismas, algo asi como un administrador.

Una dependencia es una librería open source (distribuida por terceros) que utilizamos como complemento de desarrollo en nuestro proyecto.

Instalación de bower

Para instalar bower debemos tener previamente instalado en nuestro sistema NodeJS y Git (si estas trabajando en Linux, ya vienen instalados por defecto).

Bower lo instalamos de forma global (para que este disponible desde cualquier parte del sistema) a través de NPM con el siguiente comando.-

1
npm i -g bower

Si estas trabajando en Linux recuerda dar privilegios de super usuario (sudo), los flag -i y -g significan install y global respectivamente.

Para comprobar que se instalo correctamente, consultamos la versión de bower.-

1
bower -v

Y nos aparecerá su versión.-

1
1.8.2

Configuración de bower

La configuración consta de dos pasos, el primero es crear el archivo bower.json en el cual vamos a guardar las dependencias que vallamos instalando en nuestro proyecto, abrimos la shell y nos ubicamos en el directorio principal del proyecto, ingresamos el siguiente comando.-

1
bower init

Se iniciara un asistente y nos pedirá información sobre nuestro proyecto (preguntas de rutina), al terminar tendremos nuestro archivo creado y un contenido similar.-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
name: 'project-name',
description: 'Descripcion del proyecto',
main: 'gulpfile.js',
authors: [
'Paulo Andrade'
],
license: 'MIT',
keywords: [
'bower',
'project'
],
homepage: 'https://github.com/Codeandomx',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
]
}

Ahora pongan atención en la linea 17, dentro de los directorios que aparecen en la propiedad ignorar esta bower_components, en este directorio se almacenaran las dependencia que instalemos con bower.

La segunda parte de la configuración es crear el archivo .bowerrc, en este archivo podemos configurar el directorio donde queremos que sean almacenadas las dependencias, un ejemplo es el siguiente.-

1
2
3
{
"directory": "public/vendor"
}

Ahora nuestras dependencias las encontraremos en el directorio vendor.

Instalación de dependencias

Como ejemplo vamos a instalar la dependencia de JQuery, para ello hay varias formas de llegar a esta dependencia, nos iremos por el camino largo para aprender un par de cosas, empezamos buscando las dependencias que contengan la palabra clave jquery.-

1
bower search jquery

Si estas trabajando en linux debes ejecutar el comando de esta forma: sudo bower search jquery –allow-root

Nos aparecerá una lista bastante amplia, les muestro algunos resultados.-

1
2
3
4
5
6
7
query https://github.com/jquery/jquery.git
jquery https://github.com/jquery/jquery-dist.git
jQuery https://github.com/jquery/jquery.git
jquery.x https://github.com/jljLabs/jquery.x.git
jt_jquery https://github.com/vicanso/jt_jquery.git
jquery-m https://github.com/meetup/jquery.git
jquery.Q https://github.com/jsbuzz/jQuery_Q.git

A nosotros nos interesa el segundo resultado, obtenemos información sobre este paquete con el siguiente comando.-

1
bower info jquery

Nos muestra información sobre la dependencia y las versiones que estan disponibles sobre la misma.-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
bower cached        https://github.com/jquery/jquery-dist.git#3.2.1
bower validate 3.2.1 against https://github.com/jquery/jquery-dist.git#*

{
name: 'jquery',
main: 'dist/jquery.js',
license: 'MIT',
ignore: [
'package.json'
],
keywords: [
'jquery',
'javascript',
'browser',
'library'
],
homepage: 'https://github.com/jquery/jquery-dist',
version: '3.2.1'
}

Available versions:
- 3.2.1
- 3.2.0
- 3.1.1
- 3.1.0
- 3.0.0
- 2.2.4
...

Si queremos instalar la ultima versión simplemente utilizamos el nombre de la dependencia como tal.-

1
bower install jquery --save

Si queremos instalar una versión en especifico utilizamos el nombre de la dependencia seguido de # y seguido de este el numero de la versión, ejemplo.-

1
bower install jquery#2.2.4 --save

El flag –save nos sirve para indicarle a bower que agregue la dependencia al archivo bower.json.

Una ves tengamos instalada la dependencia la encontraremos en el directorio vendor, solo basta con agregar el archivo js (en este caso por ser Jquery) al archivo HTML.-

1
2
<script src="vendor/jquery/dist/jquery.min.js">
</script>

Otros comandos útiles

Ver dependencias instaladas

Podemos consultar las dependencias instaladas en nuestro proyecto con el siguiente comando.-

1
bower list

Actualizar dependencias

Existen dos tipos de actualizaciones, la primera es actualizar una dependencia en especifico.-

1
bower update jquery

O podemos actualizar todas las dependencias con el siguiente comando.-

1
bower update

Eliminar dependencias

Podemos desinstalar una dependencia con el siguiente comando, la dependencia se desinstalara pero no sera eliminada del archivo bower.json.-

1
bower uninstall jquery

Si queremos eliminarla y quitarla del archivo bower.json utilizamos el flag –save.-

1
bower uninstall jquery --save

bower install

Si se preguntan cual es la finalidad del archivo bower.json, es tener la información de las dependencias y versiones de estas que utiliza nuestro proyecto para poder instalarlas cuando sean necesario (por ejemplo si clonamos nuestro proyecto desde gtihub), para instalarlas utilizamos el siguiente comando.-

1
bower install

Conclusiones

En este articulo tratamos de cubrir todos los aspectos básicos de bower pero aun hay mucho que desmenuzar, pero eso ya sera tema de otros articulo.

Bower es un excelente gestor para nuestras dependencias, si aun no lo están utilizando les recomiendo agregarlo como parte del desarrollo de su proyecto y verán como les facilitara la vida.

Que tengan feliz código.


Te fue de utilidad el articulo, ayudanos a compartir para que a más personas les resulte util!

Te interesa el tema, recibe los nuevos articulos directamente en tu email.-