15Oct

Yarn intenta hacerse un hueco evitando duplicidades en la descarga de dependencias y unificando NPM y Bower

Quedan lejos los tiempos en que la carpeta de librerías la íbamos componiendo descargando ficheros de diversos páginas de Javascript y CSS para empezar la maquetación de nuestra página web…

La gestión de dependencias también era manual, así que cada cierto tiempo habíamos de recorrer de nuevo las páginas de las que habíamos descargado la librería para ver que tenían las nuevas versiones. Nos enfrentábamos a dependencias rotas entre librerías, horas de trabajo para actualizar las librerías, etc…

Gestores de paquetes

Y entonces nacieron en Javascript los gestores de paquetes como Bower o NPM.

En el caso de Bower, orientado al mundo web, nos permite gestionar las dependencias de Javascript, CSS, o incluso fuentes e iconos a través de un fichero de configuración bower.json.

NPM se convirtió en el principal gestor de paquetes y dependencias de NodeJS, y con la misma filosofía que otros gestores de paquetes, permite configurar las dependencias en un fichero de configuración package.json.

Múltiples gestores de paquetes

Dentro de nuestros proyectos web, muchas veces nos enfrentamos a gestionar múltiples gestores de paquetes, teniendo en Bower las dependencias de Javascript del lado del cliente y entornos de desarrollo de CSS, en NPM nuestras librerías de minificación, compilación, etc… de NodeJS para los archivos finales de producción, Pip para nuestras dependencias de Python, etc…

La combinación de Bower y NPM como gestores separados de paquetes en un mismo proyecto es común ya que gestionan parcialmente el proyecto con diferentes librerías, pero en muchos casos se pisan entre ellos, ya que una misma librería se puede descargar por ambos canales.

Un gestor para dominarlos a todos…

Yarn nos permite unificar ambos archivos de configuración en un sólo archivo, que además, no es necesario de cambiar de formato ya que funciona el mismo formato de package.json y podemos añadir paquetes de bower, repositorios Git privados o públicos, carpetas locales, etc…

Características de Yarn

Rapidez: Yarn usa la cache para todas las librerías que descarga. Nunca descarga una segunda vez la misma librería si puede encontrarla en su sistema de cache. Esto además permite la instalación de librerías incluso sin conexión a Internet siempre que este presente en su sistema de cache.

Modo plano (Flat mode): No duplica dependencias dentro del árbol de dependencias de la librería. Una misma versión se descargará solo una vez dentro de las dependencias evitando duplicidad de una misma librería (y versión) como ocurre con NPM.

Paralelización: Permite descargar las dependencias en paralelo para aumentar la velocidad de descarga del árbol de dependencias.

Cómo instalar Yarn

La forma más cómoda para instalar Yarn en el sistema operativo es usar NPM, aunque si no disponéis de ese gestor, podéis realizar la instalación siguiendo la Guía de instalación.

npm install -g yarn

Una vez finalizada la instalación, la librería estará disponible de forma global en el sistema operativo.

Ejecutando el siguiente comando podéis comprobar que la librería se instalo correctamente y la versión instalada.

yarn --version

Cómo funciona

Para usar Yarn, hemos de crear un archivo de configuración package.json con la misma estructura que usamos en el caso de NPM y bower.json para Bower. Por ejemplo el siguiente archivo package.json lo es de un proyecto cualquiera o ejecutar yarn init y seguir el asistente en nuestro terminal para iniciar el paquete package.json vacío.

Usando un package.json de un proyecto como iniciando uno vacío con las dependencias del proyecto en dependencies o devDependencies nuestro fichero tendrá un aspecto parecido al siguiente:

package.json

{
  "name": "rqlogic",
  "version": "0.0.1",
  "description": "Rqlogic Gulp",
  "main": "index.js",
  "scripts": {
    "test": "npm test"
  },
  "keywords": [
    "rqlogic"
  ],
  "author": "Albert Lacarta <urodoz@gmail.com>",
  "license": "ISC",
  "dependencies": {
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.0.13",
    "gulp-concat": "^2.6.0",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^2.0.0",
    "pump": "^1.0.1"
  }
}

Para instalar las dependencias ejecutamos yarn install:

bower.json

El fichero yarn.lock

Después de cada instalación o actualización, Yarn actualiza el archivo yarn.lock con todas las dependencias instaladas dentro del directorio node_modules. Es conveniente añadir este archivo al repositorio de código para poder tener el mismo contexto de librerías en diferentes entornos de desarrollo o producción.

Este archivo es parecido al concepto de composer.lock del gestor de paquetes Composer de PHP. El archivo yarn.lock asegura que la instalación del árbol de dependencias se mantiene homogénea a través de la instalación en diferentes sistemas.

Añadiendo nuevas dependencias

Para añadir nuevas dependencias hemos de usar el comando:

yarn add <name>

El parámetro puede ser el nombre de un paquete de NPM (por defecto usa ese directorio para encontrar las dependencias) u otras opciones como un repositorio Git, un gzipped tarball o incluido una carpeta dentro del mismo sistema de archivos.

Por ejemplo, si queremos instalar la librería ScrollMagic desde el repositorio público de Github podemos ejecutar yarn add https://github.com/janpaepke/ScrollMagic y añadiremos la librería a nuestras dependencias:

root@9a39048bba41:/opt yarn add https://github.com/janpaepke/ScrollMagic
yarn add v0.15.1
[1/4] Resolving packages...
[2/4] Fetching packages...
warning lodash@1.0.2: The engine "rhino" appears to be invalid.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency
└─ scrollmagic@2.0.5
Done in 7.80s.

Podemos ver el contenido del archivo package.json, y vemos como ha añadido la dependencia dentro del archivo:

{
  "name": "rqlogic",
  "version": "0.0.1",
  "description": "Rqlogic Gulp",
  "main": "index.js",
  "scripts": {
    "test": "npm test"
  },
  "keywords": [
    "rqlogic"
  ],
  "author": "Albert Lacarta <urodoz@gmail.com>",
  "license": "ISC",
  "dependencies": {
    "scrollmagic": "https://github.com/janpaepke/ScrollMagic"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.0.13",
    "gulp-concat": "^2.6.0",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^2.0.0",
    "pump": "^1.0.1"
  }
}

Añadir librerías globales

Para añadir librerías globales de NodeJS a nuestro sistema operativo usamos la opción global del comando yarn.

Por ejemplo para añadir el cliente de Gulp, gulp-cli, a nuestro sistema operativo hemos de ejecutar su instalación global con el siguiente comando:

yarn global add gulp-cli

Repositorio Github de Yarn: https://github.com/yarnpkg/yarn

Web oficial de Yarn: https://yarnpkg.com/

Leave a comment