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の内容は以下のようになっているはずです。
{
"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つを追加してみた。
"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に関してはインストールが失敗する模様。