Do you want to switch to Platzi in English?
Tu lugar en PlatziLive
Tu lugar en PlatziLive
estamos en vivo
14

Manejo de dependencias JavaScript con Yarn

20657Puntos

hace 2 años

npm es muy lento 😦

Todos los que desarrollamos aplicaciones JavaScript hemos sentido eso alguna vez. Es cierto, npm es muy lento para instalar dependencias. Debido a eso un grupo de desarrolladores de Facebook, Google y Cloudflare desarrollaron Yarn, una alternativa a npm mucho más rápida.

Pero, ¿por qué es más rápida? A diferencia de npm, Yarn primero verifica todas las dependencias que vamos a necesitar, arma el árbol de dependencias y luego los descarga en paralelo, ya que de todas formas por si solas cada dependencia no pesa tanto como para necesitar el 100% de nuestro ancho de banda.

Por último guarda en cache todas y cada una de las dependencias descargadas, así si volvemos a descargar la misma dependencia simplemente la trae de la cache, esto también nos permite usarlo casi offline.

Otra funcionalidad interesante de Yarn es que genera un archivo yarn.lock donde se encuentra todas nuestras dependencias, sus versiones, las dependencias de nuestras dependencias y la URL para volverla a instalar, de esta forma cuando alguien más instale estas dependencias podemos estar seguros de que va a tener exactamente las mismas.

Por último Yarn verifica que las dependencias instaladas estén correctas y que no estén corruptas para asegurarnos de que funcionen y que lo hagan como esperamos, esto es gracias a que realizar una validación de checksum.

Instalación

Vamos a instalar Yarn, hay muchas formas de hacerlo dependiendo de nuestro sistema operativo.

En Windows

En Windows tenemos dos formas, la primera es descargar el instalador y ejecutarlo.

https://yarnpkg.com/latest.msi

Para usar esta opción necesitamos primero tener instalado Node.js

La otra opción es usar Chocolatey usando el siguiente comando:

choco install yarn

Si no tenemos Node.js instalado también se va a encargar de instalarlo.

En Mac

Simplemente usando brew podemos instalarlo.

brew update
brew install yarn

Si Node.js no está instalado también se va a encargar de instalarlo.

En Linux

La instalación en Linux depende de la distro que estemos usando (en todos los casos necesitamos primero instalar Node.js).

Debian/Ubuntu

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo"deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

CentOS / Fedora / RHEL

sudo wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
sudo yum install yarn

Arch Linux

yaourt -S yarn

Solus

sudo eopkg install yarn

Otras opciones

Por último, sin importar nuestro sistema operativo podemos usar alguno de los siguientes métodos.

Curl

curl -o- -L https://yarnpkg.com/install.sh | bash

Tarball

cd /opt
wget https://yarnpkg.com/latest.tar.gz
tar zvxf latest.tar.gz

npm

Sí, se puede usar npm para instalar Yarn (aunque no es recomendado).

[sudo] npm install --global yarn

Uso

Una vez instalado ya podemos empezar a usarlo, vamos a ver algunos de los comando más útiles y su equivalente en npm.

Empezando un proyecto

yarn init
# npm init

Con este comando podemos iniciar un nuevo proyecto y obtener un package.json, para esto nos va a realizar algunas preguntas, si queremos saltarnos estas preguntas podemos agregar --yes al final del comando quedando yarn init --yes.

Agregar una dependencia

yarn add [nombre]
# npm install --save [nombre]
yarn add [nombre]@[version]
# npm install --save [nombre]@[version]

Esto instala y agrega a nuestro package.json la dependencia es su última versión publicada. También podemos indicar una versión específica.

Actualizando una dependencia

yarn upgrade [nombre]
# npm upgrade [nombre]

Este comando instalar una versión actualizada de una dependencia y actualiza el package.json.

Eliminando una dependencia

yarn remove [nombre]
# npm uninstall --save [nombre]

Este otro desinstala una dependencia y la quita del package.json.

Instalando las dependencias de un proyecto

yarn
# yarn install# npm install

Este comando instala todas las dependencias indicadas en nuestro package.jsoncon las versiones especificadas.

Instalando un dependencia de desarrollo

yarn add -D [nombre]
# npm install --save-dev [nombre]

Este comando instala la dependencia indicada y la agregar al package.json como una dependencia de desarrollo.

Corriendo scripts de package.json

yarn [script]
# npm run [script]

Con esto podemos correr scripts personalizados que hayamos agregado a nuestro package.json, muy común para correr el build, los test o el start de nuestra aplicación.

Conclusiones

Con esto ya tenemos todo lo necesario para usar Yarn en vez de npm y sacar provecho de la mejora de velocidad.

Por último para mostrar un ejemplo del cambio de velocidad al instalar un proyecto con un poco más 22.000 dependencias esto es lo que tarda Yarn.

yarn install -> 19.69s

Y esto es lo que tarda npm en instalar las mismas dependencias.

npm install -> 56.85s

Y una última comparación, incluso si desactivamos la barra de progreso de npm igual Yarn sigue siendo más rápido.

npm install -> 46.43s

Como ven Yarn es mucho más rápido que npm.

Sergio Daniel
Sergio Daniel
@sergiodxa

20657Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
5
11478Puntos

yarn > npm

2
3278Puntos

se puede hacer lo mismo que se hace con npm usando yarn?

2
20657Puntos
2 años

Sí completamente.

0
6233Puntos

Gracias por el artículo, ahora si a trabajar con Yarn.

0
1171Puntos

Muy bueno Gracias 😃

0
2Puntos

Hola, parece muy interesante utilizar esta herramienta, pero tengo algunas dudas, espero puedas responder, ¡gracias!

  • ¿Yarn puede utilizar también git?
  • ¿Utiliza las mismas fuentes que npm?
  • Si ya tengo una cache desde npm-cache en Windows, ¿Cómo puedo decirle a yarn que importe los paquetes que ya tengo previamente descargados?
  • ¿Cómo es con respecto a bower, le supera en velocidad también?
2
20657Puntos
2 años
  • A que te referís con usar git? descargar módulos desde github? sí se puede
  • Sí usa las mismas fuentes que npm
  • No estoy seguro de si se pueda
  • Bower esta muerto, ninguna empresa grande lo usa, los módulos de frontend se publican todos a npm
0
10029Puntos

Para verificar que yarn esta instalado, se puede usar mediante el siguiente comando para revisar la versión

yarn --version
0
6002Puntos

Muy buen articulo, y me anima mucho a probar yarn, pero he leido que causa en algunos casos errores cuando pasa a produccion, algo sobre eso?

1
20657Puntos
2 años

Lo usamos en producción en Platzi y 0 problemas. Personalmente lo use en producción en otros proyectos y tampoco tuve problemas.

0
7614Puntos

¿Soy yo sólo o han notado que npm va mucho más rápido últimamente?

1
20657Puntos
2 años

npm mejoró mucho en la v3 y sigue mejorando, pero yarn todavía lo supera por mucho.

0
432Puntos
un año

y ahora que esta en la v5?