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.jsonscripts にコマンドを記述。

"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