LoginSignup
19

More than 5 years have passed since last update.

Yarnでreact-tutorialを動かしてみた

Last updated at Posted at 2016-10-13

ブログのコピペです(https://t-hiroyoshi.github.io/try-yarn/)

Yarnとは

Yarnとはつい先日公開された、Facebook, Exponent, Google, Tildeによって開発されたオープンソースの新しいJavaScriptパッケージマネージャです。

現在JavaScriptのパッケージマネージャとしてすでにnpmが存在していますが、Facebookほどの規模感になるとパフォーマンスやセキュリティに影響が出てきたので一から新しくYarnを作ったようです。
新しいといってもnpmと互換性を持つpackage.jsonでパッケージ管理を行い、npm registry上のパッケージをインストールするので使う側としては早くて固いnpmぐらいに思った方が良いかもしれないです。

中の人をみてみるとBabelLernaを作ったSebastianさんがコアっぽくてこの人やっぱりすごいなって思いました。

特徴をざっくりまとめるとこんな感じです

  • Ultra Fast: ダウンロードされたパッケージは全てローカルにキャッシュされて並列インストールされる
  • Mega Secure: インストールされたパッケージは実行される前にチェックサムされる
  • Super Reliable: lockfileを使っていて他のシステムでも全く同じものがインストールされることが保証されている
  • More emojis: 🐈

試す

本当はcreate-react-appを動かしたかったのですがまだ対応していなかったのでreact-tutorialでやります。

何はともあれYarn本体をインストールします。
macOSやunixは以下のスクリプトでインストールできます。

curl -o- -L https://yarnpkg.com/install.sh | bash

もしくはnpmを置き換えるものをnpmで入れるのは気持ち悪いですがnpmでも簡単に入れることができます。
yarnは現在バグがあるので今の所はyarnpkgの方を推奨します

npm install --global yarnpkg
# or
npm install --global yarn

react-tutorialをcloneしてきてdependenciesをインストールします。

git clone git@github.com:reactjs/react-tutorial.git
cd react-tutorial

yarn install
# or just "yarn"

この時点で感じたかもしれませんがめっちゃインストール早いです。
軽く計測してみたところnpmだと2.07s、Yarnだと0.66sと3倍ぐらいYarnの方が早かったです。

さらにyarn.lockが生成されてバージョンが固定されていることが確認できます。

npm-scriptsと同じ機能がYarnにもあってyarn run <script>で実行できます。
これを使ってreact-tutorialを起動してみます。

yarn run start
# or
yarn start

ブラウザでhttp://localhost:3000/を開くときちんと動いていることが確認できると思います。

まとめ

npmよりかなり高速化していることが分かりました、CLIのコマンドもnpmよりシンプルで好きなのでこれから積極的に使いたいです。JavaScript界のOSS開発速度はものすごいのでオープンになったこれから加速度的に色々改善されていくと思います。
現在npm上のyarnが現在バグっていることなどからまだ若干時期尚早かなという気がしますがいざという時はnpm使えば良いのでありかなというのが個人的な感想です。
Babel6の時みたいな大きな変更が入って苦しむことが起きないように願います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19