BLOGブログ

Yarn(や~ん!)【nvm、node、npm、yarnについて】

ヒロシです。

ヒロシは最近Netflixの「キングダム」という韓国ドラマにはまっています。 「韓流」+「ゾンビ」+「史劇」という組み合わせを、よく思いついたなぁ。。
と感心しながら観ています。お勧めなので、興味のある方は是非観てみてください。

キングダム | Netflix (ネットフリックス) 公式サイト

https://www.netflix.com/jp/title/80180171

さて、今日は前回のWebpackの際に話のでたYarn(や~ん!)のイストールをやってみたいと思います。 Yarnのロゴがネコなんで、「にゃ~ん!」をイメージしてしまいますよね。

Yarn(や~ん)について

Yarn

https://classic.yarnpkg.com/ja/

Yarnって何?ですよね。 ヒロシ的は、npmと互換性のあるパッケージ管理ツールでnpmより高速という程度の理解でいます。yarnを使うことでクライアントサイドで利用する各種パッケージをうまいこと管理してくれます。 例えば、「Font Awesome」のようなアイコンセットや、「Bootstrap」のようなUIフレームワーク、などをyarnコマンド経由で取得・管理ができます。

今回、OSはCentOS7を使います。
yum経由で簡単にyarnをイントールできるのですが、Node.js(node,npm)とYarnの理解を深めるために、Node.js(node,npm)を入れた後に、npm経由でyarnをいれてみました。

Node.js(node,npm)をインストール

Node.js(node,npm)もyumパッケージとしてもありますが 今回は、nvm(Node Version Manager)を利用してインストールします。 nvmだとグローバルインストールではなく、各ユーザーごとにインストールでき、 Node.jsのバージョン切替も簡単にできます。

nvmと同じようなツールでnodebrewというのがあり、こちらの方がマニュアルが短くて読みやすかったのですが メンテナンスが止まっているっぽいので、nvmにしました。

nodebrew

https://github.com/hokaccha/nodebrew

nvm(Node Version Manager)← 今回はこちらを使います

https://github.com/nvm-sh/nvm

nvm(Node Version Manager)のインストール

nvmインストール用のスクリプトをダウンロードして実行します。

# curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
  • インストールされたファイルは~/.nvm/に入ります。
  • インストール時に、nvmコマンドにPATHが通るように、.bashrcに以下を追記してくれます。

~/.bashrc

...
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
  • シェルを再起動、もしくはsourceコマンドでbashrcを読み込み直すと、nvmコマンドが使えるようになります。
# source ~/.bashrc
# nvm -v
0.36.0

nvmコマンドでNode.js(node,npm)をインストール

  • nvmコマンドでNode.js(node,npm)をインストールします。

ls-remoteでダウンロード可能なNode.jsのバーションを確認できます。

# nvm ls-remote
  • 最新版を入れる場合はバージョン指定なしでイストールします。
# nvm install node
# nvm use node
Now using node v14.13.0 (npm v6.14.8)

  • バージョンを指定してインストールもできます。
# nvm install 13
...
Now using node v13.14.0 (npm v6.14.4)

  • nvm経由でインストールされたコマンドは、~/.nvm/versions/node/以下に配置されています。
# which node
/root/.nvm/versions/node/v14.13.0/bin/node

# which npm
/root/.nvm/versions/node/v14.13.0/bin/npm
  • インストールされているバージョンはlistオプションで確認できます。
# nvm list
       v13.14.0
->     v14.13.0
...
  • useオプションでバージョンの切替ができます。
# nvm use 14
Now using node v14.13.0 (npm v6.14.8)

# node -v
v14.13.0

# npm -v
6.14.8

yarnをインストール

  • yarnはnpm経由でインストールします。
  • インストールする際にローカルインストールかグローバルインストールかで違いがあります。
  • yarnコマンドはPATHを通してグローバルに使いたいので、グローバルインストールしますが、ローカルインストールも同時にしておかないとグローバルイントールしたyarnを後でアンインストールができなくなるので注意が必要です。
  • グローバルインストールには-gオプションをつけます。

プロジェクトディレクトリを作りyarnをローカルインストールすると、nodeモジュール関連のファイルが作られます。

# mkdir app && cd app
# npm install yarn
# tree -L 3
.
|-- node_modules
|   `-- yarn
|       |-- LICENSE
|       |-- README.md
|       |-- bin
|       |-- lib
|       |-- package.json
|       `-- preinstall.js
`-- package-lock.json

この状態ではyarnコマンドにPATHが通っていません。

# which yarn
/usr/bin/which: no yarn in (/root/.nvm/versions/node/v14.13.0/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin)

グローバルでもインストールします。

# npm install -g yarn
# which yarn
/root/.nvm/versions/node/v14.13.0/bin/yarn

yarnの実行とロックファイルの生成

  • プロジェクトディレクトリでyarnコマンドを実行すると、npm関連のファイルにプラスして、yarn関連のyarn.lockファイルが追加されます。
# yarn
yarn install v1.22.10
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 0.16s.
  • yarn用のロックファイル「yarn.lock」を作ってくれます。
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
  • npmが生成したロックファイル「package-lock.json」があるので、警告がでます。npmとyarnと2つのロックファイルがあるので、npmのロックファイル「package-lock.json」は消したほうが安全じゃない?と警告がでます。

警告に従いpackage-lock.jsonは消すことにします。

# rm -f package-lock.json
  • npmとyarnで共通するファイルもあるので少し混乱しますが、次のようなイメージになります。
# ll
total 16
drwxr-xr-x 3 root root 4096 Oct  4 02:49 node_modules      <----- 【npm yarn 共通】
-rw-r--r-- 1 root root  309 Oct  4 02:36 package-lock.json <----- 【npm 固有】(※ 警告に従い、削除した)
-rw-r--r-- 1 root root   57 Oct  4 02:49 package.json      <----- 【npm yarn 共通】(※ この後、パッケージを追加すると生成される)
-rw-r--r-- 1 root root  292 Oct  4 02:49 yarn.lock         <----- 【yarn 固有】

利用したいパッケージを探してインストール

  • ここまできて、やっとパッケージのインストールができます。
  • インストールしたいパッケージをyarnサイトで「fontawesome」「bootstrap」などキーワードを打ちこんで探します。

Yarnサイト

https://classic.yarnpkg.com/en/

Font Awesomeのページ

https://classic.yarnpkg.com/en/package/font-awesome

Bootstrapのページ

https://classic.yarnpkg.com/en/package/bootstrap

各ページに記載されているインストール方法で追加します。

Font Awesomeをインストール

# yarn add font-awesome

Bootstrapをインストール

# yarn add bootstrap
  • node_modules以下に各パッケージが追加されます。後はこれをいつも通り読み込んで使うだけです。
# tree -L 3
.
|-- node_modules
|   |-- bootstrap
|   |   |-- LICENSE
|   |   |-- README.md
|   |   |-- dist
|   |   |-- js
|   |   |-- package.json
|   |   `-- scss
|   `-- font-awesome
|       |-- HELP-US-OUT.txt
|       |-- README.md
|       |-- css
|       |-- fonts
|       |-- less
|       |-- package.json
|       `-- scss
|-- package.json
`-- yarn.lock

何がうれしいのか?

  • 「こんな回りくどいことしなくて、各パッケージのソースコードをダウンロードして使えばいいんじゃない?」とも思えてくるのですが、Gitなどで共有管理したりする場合にこの方が都合がよいことに気づきました。
  • yarnコマンドで追加されたパッケージの情報は、package.jsonyarn.lockに記録されます。
  • この2ファイルさえあれば、yarnコマンドでパッケージファイルを復帰することができます。なのでこの管理ファイルのみをGitに入れておけば、yarnコマンドで依存パッケージの再取得が簡単にできるわけです。

パッケージ「Font Awesome」と「Bootstrap」を削除します。

# rm -rf node_modules
# ll
total 8
-rw-r--r-- 1 root root  84 Oct  4 03:37 package.json
-rw-r--r-- 1 root root 552 Oct  4 03:37 yarn.lock

yarnコマンドを実行して、package.jsonyarn.lockファイルからパッケージを復帰します。

# yarn

パッケージ「Font Awesome」と「Bootstrap」が復帰しています。

# tree -L 3
.
|-- node_modules
|   |-- bootstrap
|   |   |-- LICENSE
|   |   |-- README.md
|   |   |-- dist
|   |   |-- js
|   |   |-- package.json
|   |   `-- scss
|   `-- font-awesome
|       |-- HELP-US-OUT.txt
|       |-- README.md
|       |-- css
|       |-- fonts
|       |-- less
|       |-- package.json
|       `-- scss
|-- package.json
`-- yarn.lock

今日は以上になります。

この記事を書いたブログライター:ヒロシ

ヒロシです。
丸善印刷でWebのお仕事をしています。
趣味は英会話です!

この記事を書いたブログライター:ヒロシ

ヒロシです。
丸善印刷でWebのお仕事をしています。
趣味は英会話です!