Mostrar lo simple que es utilizar un gestor de dependencias en front como bower.
Los gestores de dependencias son un mecanismo que permite obtener repositorios con librerías o plugins, permitiendo que sin importar en dónde se trata de ejecutar el proyecto siempre se tengan las mismas dependencias y versiones.
- NPM - Package manager. Installs, publishes and manages node programs.
- Node.js - Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications.
- Bower.js - Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for.
Paso 1: Instalar node.js y npm.
Para utilizar bower debemos instalar nodejs que ya tiene incluido npm que es el gestor de paquetes de nodejs. En la pagina de nodejs se pueden obtener los paquetes y los métodos de instalación para los distintos SO. Nodejs Instalación
Paso 2: Verificar la instalación de nodejs y npm.
Para verificar si está instalado nodejs y npm ejecutamos en la terminal:
$ node --version lo cual muestra la versión de nodejs instalada.
Paso 3: Instalar bower de manera global.
Todos los paquetes de nodejs se instalan con npm con la siguiente sintaxis:
$ npm install <nombre del paquete> en nuestro caso para bower lo haremos de la siguiente manera: $ npm install -g bower agregando el "-g" para que el paquete se instale de manera global y podamos usar su terminal.
Paso 4: Obteniendo paquetes mediante bower.
Esta es la primera forma de obtener paquetes mediante bower.
Se usa la terminal de bower como linea de comandos para ejecutar acciones, algunos comandos de la linea de comandos de bower son:
- Instalando un paquete, en este caso jquery
$ bower install jquery - Instalando un paquete especificando un versión
$ bower install jquery@1.11.1 - Buscar un paquete
$ bower search jquery - Actualizando un paquete
$ bower update jquery - Borrando un paquete
$ bower delete jquery
Paso 5: Creando archivos de configuracion de bower.
Bower tiene dos archivos principales para definir las dependencias, el primero es bower.json que define cuáles son las dependencias que se necesitan y el segundo archivo es .bowerrc que define si los paquetes serán cachados para un rápido acceso o la carpeta de destino.
Paso 6: El archivo bower.json
Este archivo nos permitirá definir cuáles son las dependencias que necesitamo. La estructura básica del archivo es la siguiente:
{
"name": "BowerDemoSnippet",
"description": "...",
"version": "0.0.1",
"private": true,
"author": "KamikazeLab",
"repository": {
"type": "git",
"url": "https://kamikazelab.git.beanstalkapp.com/bower-demo-snippet.git"
},
"dependencies": {
"jquery": "1.11.0",
"angular": "1.2.25",
"lodash": "2.4.1",
"momentjs": "2.5.1"
}
}Paso 7: El archivo .bowerrc
En este archivo podemos configurar el comportamiento de bower, la estructura básica es:
{
"directory": "bower_components",
"storage": {
"packages": ".bower-cache",
"registry": ".bower-registry"
},
"tmp": ".bower-tmp"
}Nota: El archivo bower.json es obligatorio pero el .bowerrc es opcional, si no existe bower tomará las configuraciones por defecto.
Paso 8: Instalar los paquetes
Cuando ya tengamos estos dos archivos o al menos el bower.json en nuestro directorio podemos proceder a instalarlos de la siguiente forma:
$ bower install
El comando se encargará de leer el archivo bower.json y descargar todas las librerías en él especificadas, y las colocará por defecto en una carpeta llamada "bower_components".
- Instalacion de bower:
- Meet Bower: A Package Manager For The Web:
- Autor del snippet: Mario Andrade @TheVansters
- Los snippets pertenecen a KamikazeLab
github