Usando NPM y Bower para proyectos frontend

En este artículo vamos a hacer una pequeña introducción a los gestores de paquetes NPM y Bower, pero enfocada al desarrollo frontend y a los más principiantes en el desarrollo web.

Un gestor de paquetes, es una herramienta que se encarga de gestionar otras librerías o frameworks de terceros que utilizamos en nuestros proyecto. Se encarga de añadirlo a nuestro proyecto y controlar las versiones que usamos muy fácilmente, además de gestionar las dependencias propias de ese paquete.

Existen bastantes gestores de paquetes enfocados al desarrollo web, pero en este artículo nos vamos a centrar en dos de los más populares que son NPM y Bower. Utilizaremos NPM para la gestión de dependencias de desarrollo y Bower para la gestión de dependencias finales.

Las dependencias de desarrollo son aquellas que usamos mientras desarrollamos, pero no forman parte del proyecto final. Son el caso de los automatizadores de tareas como Gulp o los Linters, que sirven para controlar la calidad del código y los errores.

Por otra parte las dependencias finales son aquellas que serán parte del producto final.

Configurando un proyecto NPM

Vamos a ver como usar NPM en nuestro proyecto para gestionar paquetes de dasarrollo. Abrimos un terminal y creamos un directorio de trabajo vacío y nos situamos en él.

Ahora sí despues de tantos avisos vamos a allá. Para crear un paquete NPM basta con tener un directorio con un archivo package.json. Este archivo contiene una estructura json con la información de nuestro paquete. Una forma fácil de crearlo es con el comando npm init

C:\wamp\www
λ mkdir mi-proyecto

C:\wamp\www
λ cd mi-proyecto\

C:\wamp\www\mi-proyecto
λ npm init

Press ^C at any time to quit.
name: (mi-proyecto)
version: (1.0.0) 0.0.1
description: Mi fabuloso proyecto.
entry point: (index.js) index.html
test command:
git repository:
keywords: foo, bar, prueba
author: Adrián Guerra
license: (ISC) MIT
About to write to C:\wamp\www\mi-proyecto\package.json:

{
  "name": "mi-proyecto",
  "version": "0.0.1",
  "description": "Mi fabuloso proyecto.",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "foo",
    "bar",
    "prueba"
  ],
  "author": "Adrián Guerra",
  "license": "MIT"
}


Is this ok? (yes)

Como vemos nos va haciendo una serie de preguntas y una sugerencia, entre paréntesis, podemos darle a Intro y aceptar la sugerencia o introducir nosotros manualmente el valor. que queremos.

Una vez creados ya podemos añadir paquetes. En este ejemplo voy a instalar Gulp. Para instalar un paquete utilizamos el comando npm install --save-dev nombre-del-paquete.

El modificador --save-dev se utiliza para que guarde una referencia de dependencia en nuestro archivo package.json de lo contrario el paquete se bajaría a la carpeta del proyecto, pero no quedaría reflejado como una dependencia de desarrollo.

Si no estamos manejando dependencias de desarrollo podemos usar el modificador --save para que lo guarde como dependencia final, pero nosotros no usaremos NPM para dependencias finales.

Por último decir que la sentencia se puede acortar cambiando install por i, --save por -S y --save-dev por -D.

Así pues para instalar Gulp y añadirlo como dependencia de desarrollo debemos usar el comando:

npm i -D gulp

Ahora nuestro archivo package.json se habrá modificado a algo así:

{
  "name": "mi-proyecto",
  "version": "0.0.1",
  "description": "Mi fabuloso proyecto.",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "foo",
    "bar",
    "prueba"
  ],
  "author": "Adrián Guerra",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

y en nuestro directorio de trabajo habrá aparecido un directorio llamado node_modules. En este directorio se instalarán todos los paquetes de NPM. Si echas un vistazo al directorio verás que no solo se ha bajado Gulp sino también un montón de paquetes más. Estos paquetes son las dependencias de Gulp y las dependencias de las dependencias.

Como vemos NPM se encarga por nosotros de bajar todas las dependencias necesarias sin que nos tengamos que preocupar por ellas. Hasta aquí lo que hay que saber de momento de NPM para poder empezar a trabajar con él. En próximos artículos entraremos más a fondo.

Añadiendo Bower a nuestro proyecto

Ahora vamos a utilizar Bower para la gestión de dependencias finales. Antes de poder usarlo hay que instalarlo.

Bower es una herramienta de Node.js que podemos instalar con NPM, pero en este caso no es una dependencia del proyecto si no una herramienta que usaremos nosotros globalmente por lo que la instalaremos en nuestra máquina y no en el proyecto en sí. Esto se hace utilizanfo el modificador -g.

npm i -g bower

Ahora una vez instalado vamos a utilizarlo para instalar en nuestro proyecto Bootstrap y Jquery.

Como sucedia en el caso de node necesitamos crear un fichero bower.json que contiene la información de los paquetes instalados. Utilizamos bower init para crearlo con el asistente.

C:\wamp\www\mi-proyecto  (mi-proyecto@0.0.1)
λ bower init
? name mi-proyecto
? description Mi fabuloso proyecto.
? main file index.html
? keywords foo,bar,prueba
? authors Adrián Guerra
? license MIT
? homepage
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry?? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
  name: 'mi-proyecto',
  description: 'Mi fabuloso proyecto.',
  main: 'index.html',
  authors: [
    'Adrián Guerra'
  ],
  license: 'MIT',
  keywords: [
    'foo',
    'bar',
    'prueba'
  ],
  homepage: '',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes

Lo bueno es que si tenemos creado un archivo package.json nos sugerirá los mismos datos que tenemos en este. Una vez instalado vamos a instalar paquetes.

El comando para instalar un paquete Bower es muy similar a NPM. Sería: bower install -s nombre-del-paquete.

λ bower i -S bootstrap
bower cached        https://github.com/twbs/bootstrap.git#3.3.6
bower validate      3.3.6 against https://github.com/twbs/bootstrap.git#*
bower cached        https://github.com/jquery/jquery-dist.git#2.2.4
bower validate      2.2.4 against https://github.com/jquery/jquery-dist.git#1.9.1 - 2
bower install       bootstrap#3.3.6
bower install       jquery#2.2.4

bootstrap#3.3.6 bower_components\bootstrap
└── jquery#2.2.4

jquery#2.2.4 bower_components\jquery

En este caso los paquetes bajados con Bower irán al directorio bower_components. Si miramos dentro verás que tenemos dos paquetes Bootstrap y Jquery y nosotros solo hemos instalado Bootstrap.

El caso es que Jquery es una dependencia de Bootstrap por lo que lo instala también. Podrías pensar: Genial, ya no tengo que intelar Jquery, pero si miras to archivo bower.json verás esto:

{
  "name": "mi-proyecto",
  "description": "Mi fabuloso proyecto.",
  "main": "index.html",
  "authors": [
    "Adrián Guerra"
  ],
  "license": "MIT",
  "keywords": [
    "foo",
    "bar",
    "prueba"
  ],
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "^3.3.6"
  }
}

Si te fijas, dependencias del proyecto solo está Bootstrap. Si algún día decidimos prescindir de Bootstrap y lo eliminanomos de nuestro archivo bower.json tampoco se instalará Jquery. Por tanto debemos añadir siempre explícitamente todos las dependencias de nuestro proyecto, aunque sean también dependencias de otros paquetes que utilicemos.

λ bower i -S jquery
bower cached        https://github.com/jquery/jquery-dist.git#2.2.4
bower validate      2.2.4 against https://github.com/jquery/jquery-dist.git#*

Y nuestro bower.json quedará así:

{
  "name": "mi-proyecto",
  "description": "Mi fabuloso proyecto.",
  "main": "index.html",
  "authors": [
    "Adrián Guerra"
  ],
  "license": "MIT",
  "keywords": [
    "foo",
    "bar",
    "prueba"
  ],
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "^3.3.6",
    "jquery": "^2.2.4"
  }
}

Ahora sí, aunque algún día eliminemos Bootstrap de nuestro proyecto, Jquery seguirá estando ahí pues es también dependencia del proyecto.

bower_components y node_modules NO son parte de nuestro proyecto

Esto es importante tenerlo claro. Nuestro proyecto ahora mismo son el archivo package.json y el archivo bower.json. Estos archivos contienen toda la información necesaria de las dependencias que hay que instalar. Podemos borrar tranquilamente los directorios node_modules y bower_components que con ejecutar en el direcotio del proyecto los comandos npm install y bower install se descargaran los paquetes necesarios.

Hay que tenerlo en cuenta a la hora de compartir proyectos o tener repositorios de código no incluir nunca estos directorios ya que son innecesarios e incluso perjudiciales ya que pueden no tener la versión actualizada de las dependencias.