📥

WSL2にNode.jsとYarnを導入する

2021/02/08に公開

Yarnとは

YarnとはJavaScript用のパッケージマネージャーです。

Node.jsにはデフォルトでnpmと呼ばれるパッケージマネージャーが付属します。
パッケージマネージャとしてはnpmが有名ですが、他にもパッケージマネージャーはいくつか存在します。
その中の1つにFaceBook社(Meta)が開発したYarnというパッケージマネージャーがあります。

こちらがYarnの公式ページになります。
https://yarnpkg.com

Yarnはnpmが問題としていた部分を抑えるように設計され、登場当時はnpmよりインストール速度が早くなったりとメリットが大きかったようです。
今ではnpmのバージョンアップで差があまりなくなってきたとのこと。

JavaScript用パッケージマネージャーについて詳しく解説してくれている記事がありました。
https://zenn.dev/hibikine/articles/27621a7f95e761

丁寧な解説記事ありがとうございます。

今回はWSL2(Windows Sub System for Linux 2)の環境にNode.jsとYarnを導入して動かすところまで行います。

環境

  • Windows 10(20H2)
  • WSL2(Ubuntu 20.04 LTS)

インストール

Node.jsのインストール

まずaptを使ってNode.jsとその周りの依存関係をまとめてインストールします。
ターミナルにて以下のコマンドを実行するとNode.jsがインストールされます。

$ sudo apt install -y nodejs npm

Node.js用のバージョン管理ツールnをWSL2に導入します。
バージョン管理ツールを使うことでプロジェクトごとNode.jsのバージョンを簡単に切り替えられるため重宝します。

$ sudo npm install -g n

続いてNode.jsの安定版(記事執筆時点ではv14.15.4 LTS)をインストールします。

$ sudo n lts

以後はnを使ってバージョン管理するため、最初にaptでインストールしたNode.jsとnpmを削除します。

$ sudo apt purge -y nodejs npm

依存関係も削除します。

$ sudo apt autoremove -y

nでNode.jsがうまくインストールされているかを確認します。

$ node -v

  v14.15.4

バージョンが返ってきたらWSL2にNode.jsがインストールされています。

Yarnのインストール

それではYarnをインストールしていきます。Yarnのインストール方法は複数あります。

aptでインストール

npmがインストールされていなくてもインストール可能な方法です。

まずリポジトリを追加します。
リポジトリの追加にcurlを使うため、予めcurlコマンドをインストールしておきます。

$ sudo apt install -y curl

# コマンドの確認
$ which curl
  /usr/bin/curl

curlが使えるようになったら以下のコマンドでリポジトリを追加します。

$ 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 update && sudo apt install yarn

Yarnがインストールされたか確認します。

$ yarn --version
  1.22.5

npmを使ってインストール

$ sudo npm install -g yarn

インストールされたバージョンを確認します。

$ yarn --version

  1.22.10

npmを使って導入する場合、グローバルオプション-gを付けてグローバルにインストールすることが公式ドキュメントにて推奨されています。

さいごに

WSL2にNode.jsとYarnをインストールする方法についてまとめました。
パッケージマネージャーは依存性を解決しながらモジュールを管理してくれる優秀なツールで、JavaScriptの開発をする上では必要不可欠です。
今回の記事がWSL2を使ってJavaScript開発を始める方の参考になれば幸いです。

最後まで読んでいただきありがとうございました。

参考

GitHubで編集を提案

Discussion