yarnとは？【フロントエンドパッケージ管理】

概要

・npm互換のフロントエンドパッケージマネージャー
・facebookが開発した
・npmと同じことをできる
・npmとコマンドがちょっと違う（結構似てる）

※npmが分からない人はこちらの記事を先にチェック
npmとは？

npmと比べたメリット

・パッケージインストールが早い
→キャッシュ利用したり、並行インストールしたりできる
・メンバー間での厳格なバージョン固定共有が可能
→yarn.lockファイルによってバージョン固定される

使い方

・yarn init
→package.jsonが作られる

・yarn install（開発時はこうする）
[yarn.lockがすでにある場合]
→package.jsonのdependenciesとdevDependenciesに書かれているパッケージをインストールする
→各パッケージはyarn.lockに記載されているバージョンがインストールされる

[yarn.lockがない場合]
→package.jsonのdependenciesとdevDependenciesに書かれているパッケージをインストールする
→yarn.lockを作成し、インストールした各パッケージのバージョン情報を記述する

※省略して yarn だけでも実行できる

・yarn install --production（本番環境ではこうする）
→package.jsonのdependenciesに書かれているパッケージをインストールする
→各パッケージはyarn.lockに記載されているバージョンがインストールされる

・yarn add {パッケージ名}
→そのパッケージがpackage.jsonのdependenciesに追記される
→yarn.lockにインストールしたパッケージのバージョンが追記される
→本番環境だけで必要なパッケージはこうする

・yarn add --dev {パッケージ名}
→そのパッケージがpackage.jsonのdevDependenciesに追記される
→yarn.lockにインストールしたパッケージのバージョンが追記される
→開発時のみ必要なパッケージはこうする
→例えばテストツールやデバッグツールなど

・yarn upgrade {パッケージ名}
→package.jsonに記述されている範囲でそのパッケージが更新される
→更新したバージョンがyarn.lockに記載される
→パッケージ名を省略すれば全パッケージが更新される

開発時の流れ

最初にプロジェクト作成する人

・yarn init でpackage.jsonを作成
・yarn add {パッケージ名}で本番用パッケージをpackage.jsonに追加&yarn.lockにバージョン情報追加
・yarn add --dev {パッケージ名}で開発用パッケージをpackage.jsonに追加&yarn.lockにバージョン情報追加
・package.jsonとyarn.lockをプッシュして共有

プロジェクトに参加したメンバーたち

・yarn intall でみんなと同じパッケージをインストール
※この時、各パッケージはyarn.lockに記述されているバージョンがインストールされるため、チームメンバーと同一バージョンをインストール可能

新しいパッケージを入れるとき

・yarn add {パッケージ名} でインストールしてローカルで動作確認
・package.jsonとyarn.lockをプッシュして共有

タスクランナーとして利用

npmと同様に、yarnもタスクランナーとして利用可能。

package.json の scripts にコマンドを記述。

"scripts": {
    "{呼び出しキーワード}": "{実行されるシェルコマンド}"
}

そして、
yarn run {呼び出しキーワード}
のように実行すれば、package.jsに記述したシェルコマンドが実行される。

例えば
babel変換やwebpackのバインド処理など
長くてオプションが複雑なコマンドを、
build のような短いキーワードで登録しておき
yarn run build だけで実行できるようにしたりする。

yarn自体のインストール

windows、mac

公式サイトからインストーラダウンロード
https://yarnpkg.com/en/docs/install#windows-stable

linux

debian

sudo apt update && sudo apt install yarn

centos

sudo yum install yarn

参考

https://ics.media/entry/13838/
https://qiita.com/senou/items/d939601e32c0005ebfe3
https://yarnpkg.com/ja/
https://yuta-yamamoto.hatenablog.com/entry/2018/11/12/222001