yarnとは何か？

facebookを中心に開発されたnpmクライアント、Hadoopに同名のフレームワークがありQiitaのタグも現状ではそちらの方を指してるので注意。

おそらく大文字でYARNだとHadoopで、小文字でyarnだとnpmって感じで使い分けられるのではなかろうかと予想。
※とか思ってたけどyarnpkgに落ち着きそうである。

npm と何が違うのか(※yarnpkg.comより引用)

Ultra Fast（超速い）
Mega Secure（超安全）
Super Reliable（超ちゃんとしてる）

使い方は？

npmを使ったことがあるならほとんどそのままの感覚で利用できる、以下にreact+browserify+babel+JSX変換したい場合の手順を具体例として上げておく。

yarn インストール

まずyarnをインストールする、macOS/windows/linuxそれぞれでのインストールの仕方がyarnのサイトの「Install yarn」にあるのでそれに従ってインストールする、以降の例はmacOSでのもの。

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

ちなみにこれだと自分でPATHを通さないといけなかったりするので、面倒な場合は

npm install -g yarnpkg

でインストールすれば、大体大丈夫な気がする。
※npmの代替ツールをnpmでインストールするのは何か自己矛盾を感じるが。

package.jsonの作成

yarn init

でいつものように名前とか聞かれるので、無視してENTER押してればとりあえずpackage.jsonができてるはず。

reactをインストール

yarn add react
yarn add react-dom

でreactをインストールする、オプションがない場合は「dependencies」の方に追加されます。

ビルド環境を構築

Sassを使いたいのでnode-sassをインストール
yarn add node-sass --dev

--devオプションをつけることで「devDependencies」に追加されます、「peerDependencies」に追加したい場合は--peerをつければOK。

Browserify+babelをインストール
yarn add browserify --dev
yarn add babelify --dev
yarn add babel-preset-es2015 --dev
yarn add babel-preset-react --dev

jsのminifyをしたいので以下をインストール
yarn add uglifyjs --dev

間違ってインストールしてしまった場合は、yarn remove [pkgname]でアンインストールできます。

ここまでうまくいっていれば、package.jsonの内容は以下のようになっているはずです。

package.json

{
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.0",
    "node-sass": "^3.10.1",
    "uglify-js": "^2.7.3"
  }
}

ビルド用のscriptsを追加

タスク名は何でもいいが、とりあえず下記の3つを追加してみた。

package.json

  "scripts": {
    "build:sass": "node-sass --output-style compressed src/sass/style.scss dist/css/style.css",
    "build:babel": "browserify -t babelify src/js/app.js -o dist/js/app.js",
    "build:min": "uglifyjs dist/js/app.js --compress -o dist/js/app.js"
  }

「src」ディレクトリ内のファイルをビルドして「dist」ディレクトリに吐き出すというもの。

build:sass がsassのビルドでscssをcssに変換して吐き出す
build:babel がbrowserify+babelify+JSX変換
build:min が上記で生成したjsのminifyでuglifyjsで圧縮

scriptsを実行

yarn run build:sass

などでscriptを指定すれば実行可能、ちなみにインストールのみならずscriptの実行もnpmよりyarnの方が速い気がする。

感想

今の所npmと異なる独自機能などはないようなので、超速いnpmという感じ。

ただしまだ出来たてのものなので、いくつか問題点もあるようで自分が気がついた範囲ではprivateなrepositoryに関してはインストールが失敗する模様。

Yarnで react+browserify+babel+JSX変換してみる