Como e por que usar Yarn no Rails?

O Yarn facilita o gerenciamento de dependências de bibliotecas, além de ser rápido e fácil de usar. Vamos ver as vantagens de usá-lo em seu projeto e como fazê-lo?

Yarn é um gerenciador de pacotes bem parecido com o NPM, que roda em cima do NodeJS, criado pelo Facebook com o intuito de substituir o NPM, trazendo mais velocidade para o gerenciamento de pacotes, já que ele paraleliza instalações de pacotes.

A vantagem de usá-lo com o Rails é que você facilita o gerenciamento das bibliotecas CSS e Javascript de seu projeto. Seu funcionamento é bem parecido com as gems do Ruby, só que para o universo front-end.

No Rails é comum procurarmos por gems que facilitam a utilização dessas bibliotecas em nossos projetos, mas ficamos dependente de atualizações das mesmas. O Yarn é uma boa solução pra tudo isso.

Para instalar o Yarn no Mac, basta rodar

brew install yarn

Se você usa outro SO, veja como instalar aqui: https://yarnpkg.com/en/docs/install

Agora vamos ver como aplicar em nossos projetos.

Para isso, vou criar um novo projeto Rails:

rails new rails-yarncd rails-yarn/

Vamos iniciar o Yarn em nosso projeto com o seguinte comando:

yarn init

O terminal irá te fazer uma série de perguntas a respeito do seu projeto. Você não precisa preencher se não quiser

yarn init v1.5.1question name (rails-yarn):question version (1.0.0):question description:question entry point (index.js):question repository url:question author (Maurício Ackerman):question license (MIT):question private (true):success Saved package.json✨  Done in 8.22s.

Veja que ao finalizar o comando, um novo arquivo package.json é criado na raiz do seu projeto. Esse arquivo centraliza todas as informações do seu projeto, bem como suas dependências

{  "name": "rails-yarn",  "private": true,  "dependencies": {},  "version": "1.0.0",  "main": "index.js",  "author": "Maurício Ackermann",  "license": "MIT"}

Vamos adicionar uma dependência em nosso projet:

$ yarn add jqueryyarn add v1.5.1info No lockfile found.[1/4] 🔍  Resolving packages...[2/4] 🚚  Fetching packages...[3/4] 🔗  Linking dependencies...[4/4] 📃  Building fresh packages...success Saved lockfile.warning Your current version of Yarn is out of date. The latest version is "1.6.0", while you're on "1.5.1".info To upgrade, run the following command:$ curl -o- -L https://yarnpkg.com/install.sh | bashsuccess Saved 1 new dependency.info Direct dependencies└─ [email protected] All dependencies└─ [email protected]✨  Done in 0.78s.

Veja que na terceira linha, ele fala info No lockfile found. e na 8 liva temos o seguinte output: success Saved lockfile.. O Yarn utiliza um arquivo chamado yarn.lock para salvar as informações de todas as versões de nossas dependências, bem parecido com o arquivo Gemfile.lock de nossos projetos Rails. Isso garante a consistência das versões das dependências de seu projeto, evitando que em cada ambiente rode uma versão diferente.

Vejamos o conteúdo do Yarn.lock:

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.# yarn lockfile v1
[email protected]^3.3.1:  version "3.3.1"  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"

Agora que instalamos a biblioteca, vamos adicionar ao nosso projeto. Para isso, vamos editar o arquivo app/assets/javascripts/application.jsadicionado o jquery:

//= require jquery

Pronto, seu projeto já está com o jQuery funcionando graças ao Yarn. É importante você adicionar ao seu .gitignore a pasta node_modules, para que as bibliotecas não sejam comitadas junto ao seu projeto.

Ao clonar o repositório, para instalar as dependências basta rodar o comando

yarn install

O que você achou dessa alternativa para gerenciamento de suas bibliotecas? Simples e rápido, além de ser super recomendada, não é mesmo? Deixe seu comentário sobre como você está utilizando o Yarn em seus projetos.

Num próximo artigo vou falar da utilização do Webpack nos projetos Rails, substituindo o Sprockets.

Até mais!