59
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

君の名は・・YARN!

npm_yarn_500.png

Yarnって何?

※もろにパロディですが、記事内容は真面目です。

みなさんはYarnをご存知でしょうか?
もしかしたらフロントエンジニアの方は最近耳にしたことがあるかもしれません。

まず「Yarnとは」でググってみてください。
すると・・

kimijanai.png

残念ながら意図しない別のYarnが出てきます:open_mouth:
(Apache Hadoopに詳しい方はこちらのYarnの方が馴染みがあるかも)

⬆️出だしの画像だけ見たら「npmと何か関係があんの?例の映画のごとく入れ替わりでもするんかいな?」と思うかも。

ここで言うYarnとはnpmと互換性のあるJavaScriptのパッケージマネージャーです。

Yarn公式ドキュメント
https://yarnpkg.com/

簡単に言えばnpm installをより高速に、そしてコンパクトにしたものです。

Yarnのインストール

Yarnもnodeパッケージの1つなので、たった1行ですみます。
$ npm i -g yarn

Yarnの使い方

yarnコマンドはイコールnpm installとなります。
[実際のyarnコマンド実行の様子]
yarn実行.gif

その他のコマンドは以下に詳しく記載します。

npm互換コマンド

npmと互換性があるので同じようにコマンドが使えます。

npm yarn
npm install yarn
npm init yarn init
npm run <script name> yarn run <script name>
npm test yarn test
npm bin yarn bin
npm install <package name> yarn <package name>
npm install <package name> --save yarn add <package name>
npm install <package name> --save-dev yarn add <package name> --dev
npm install <package name> --global yarn global add <package name>
npm uninstall <package name> yarn remove <package name>
npm ls yarn ls
npm cache clean yarn cache clean
npm cache ls yarn cache ls
npm outdated yarn outdated
npm update --save yarn upgrade
npm install <package name>@latest --save yarn add <package name>
npm link yarn link
npm login yarn login
npm publish yarn publish

Yarn独自のコマンド

npmには無いYarn独自のコマンドもあります。

yarn licence ls
インストール済みの各パッケージのライセンスとパッケージ詳細URLを表示します。
yarn licence ls.png

yarn licenses generateDisclaimer
自動的にライセンス関連の文章(?)を作成してくれますが、使いどころがよくわかりません:sweat:

yarn cheet sheetによるとyarn licenses generateコマンドになってますが、最新のyarnではコマンドエラーが発生します。

error Invalid subcommand. Try "ls, generateDisclaimer"
info Visit https://yarnpkg.com/en/docs/cli/licenses for documentation about this command.

generateDisclaimergenerateの代わりとなるコマンドっぽい。

yarn why
yarn why (パッケージ名)で指定したパッケージの詳細情報を表示することが出来ます。
yarn why.png

Yarnのメリット

パフォーマンス

「さあ、ニュータイプの力を見せてもらおうか」と思ってパッケージのインストール速度を試すと、
「あ、あれ・・?そこまで速くなくない?むしろnpm installより遅くね?汗」って恐らくなります。

これはYarnはパッケージの依存性を解決してくれるため、インストールするパッケージ群の依存性が複雑であればあるほど時間がかかることによります。(シンプルなパッケージ群であれば速いです)

厳密に言うとYarnのパフォーマンスの真価はキャッシュによって発揮されます。

パッケージインストール速度計測

キャッシュ有無の比較

いくつかのpackage.jsonを用いて初回インストール(キャッシュなし)と2回目のインストール(キャッシュあり)で計測します。

react-es6

インストール条件 npm yarn
キャッシュなし 0m42.693s 0m28.551s
キャッシュあり 0m35.316s 0m12.087s

webpack-demos

インストール条件 npm yarn
キャッシュなし 0m41.397s 1m39.957s
キャッシュあり 0m41.320s 0m47.947s

angular2/quickstart

インストール条件 npm yarn
キャッシュなし 0m42.548s 0m25.273s
キャッシュあり 0m36.473s 0m12.264s

webpack-demosはキャッシュありでもnpmより遅い結果となりましたが、全般的にキャッシュありの場合は高速だということが判明しました。

モジュールがよりコンパクトに

Yarnはパッケージモジュールをよりコンパクトに配置します。
フォルダ数はnpmより多くなる場合がありますが、モジュールのサイズは小さくなります。

サンプルとしてこういったpackage.jsonを基にnpmとyarnでパッケージをインストールした時の比較をしてみましょう

{
  "devDependencies": {
    "axios": "^0.9.1",
    "babel-eslint": "^4.1.8",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "classnames": "^2.2.3",
    "eslint": "^1.10.3",
    "eslint-config-es2015-react": "^0.1.2",
    "eslint-plugin-react": "^3.16.1",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-redux": "^4.4.0",
    "redux": "^3.3.1",
    "redux-thunk": "^1.0.3",
    "underscore": "^1.8.3",
    "watchify": "^3.7.0"
  }
}
項目 npm yarn
ファイル数 25308 15579
ディレクトリ数 2031 2311
ディレクトリサイズ 138M 103M

ファイル数とディレクトリサイズがnpmと比べて明らかに小さくなっています。
※ただしこれもインストールするパッケージの依存関係によって多少の差がありますのでご注意ください。

その他

オフラインでのインストール

既に以前パッケージをインストールしたことがあるのであれば、yarn install --prefer-offlineによってサーバーにリクエストせずにオフラインで高速にインストールすることが可能だそうです。

よりセマンティックな管理

yarnでインストールした後は自動的にyarn.lockというファイルが生成されます。
このyarn.lockで依存するモジュールのバージョンを固定することが出来ますが、詳細はまた後日に追記したいと思います。

まとめ

検証した結果、実務レベルで導入はありだと個人的に思いました。
自分のプロジェクトでは以前npm installの遅さを解決する為にpnpmを使用していましたが、pnpmは高速である代わりに不安定であり、ほとほと悩まされてきたので近い内に是非Yarnを導入したいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
59
Help us understand the problem. What are the problem?