How to add packages using yarn instead of bower?

Subject

The Yarn is an alternative for Bower and NPM. This article will help us know how we can add packages using Yarn instead of Bower.
 

Description

Since bower package manager is going away and the Bower themselves are recommending the Yarn as Alternative . We can use Yarn to resolve packages.

Resolution

Before we use Yarn we should install Yarn on our system.

Yarn can be installed using below methods for the respective OS.

CentOS / Fedora / RHEL

curl –silent –location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo

If Node.js not installed, it can be installed with the below command

curl –silent –location https://rpm.nodesource.com/setup_8.x | sudo bash –

Install Yarn

sudo yum install yarn

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

If Node.js not installed, it can be installed with the below command

For Node.js 8

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash –
sudo apt-get install -y nodejs

Alternatively, for Node.js 10:

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash –
sudo apt-get install -y nodejs

Install Yarn

sudo apt-get update && sudo apt-get install yarn

As an alternative and quick way, we can use npm to install Yarn
sudo npm install yarn -g

To Display the current configuration

yarn config list

To add the package from npm registry

yarn add <package>

To lookup for the bower package url by name

Now to install bower packages using yarn we need to lookup for the bower packages

bower lookup <package>

To add the bower package using Yarn

yarn add @bower_components/package@package/package-dist

Example

bower lookup jquery
jquery https://github.com/jquery/jquery-dist.git
yarn add @bower_components/jquery@jquery/jquery-dist