最近、React + Redux + TypeScript辺りをちょろちょろと触ってみているのですが、この辺りを触るとなるとアレですね。npmでほげほげやらんといかんのですね。

初めはnpmでやっていたのですが「そういえばYarnってあったよな、ちょっと触ってみるか…」ということで使ってみました。

何が違うのか


たぶん調べた感じだとnpmとは下記のような違いがあるようです。

速いらしい

Ultra Fastと謳っているだけあって、速いらしいです…らしいです…。私は普段npm使わないので解りませんでした…。

バージョン固定できる

lockファイル(yarn.lock)があるのでバージョン固定できるようです。話が少しそれますが、パッケージマネージャーと言えばNugetくらいしか使ってこなかった人間としてはこのxxxx.lockをリポジトリにコミットするべきなのかどうなのかが迷いますね。迷ったのですが、基本バージョンは固定しておきたい人間ですので、こいつはリポジトリに含めることにしました。

依存パッケージがフラットで保存される

以前のnpmって依存パッケージをバカスカと大量にnode_modulesディレクトリ配下に芋づる式に保存してましたよね。yarnはそうではない…。と言いたいところなのですが、最近のnpmはここは改善されているそうなので、別にyarnだけの特徴ではなくなった…?という認識でいいんでしょうか…?

インストール


バイナリもあるのですがnpm使ってインストールしました。

1
npm install -g yarn

既存のプロジェクトをYarnで置き換えてみる


新しくテスト用に何かプロジェクトを作成してもよかったのですが、めんどくさいので、既存プロジェクトを丸々置き換えてみました。なお、下記の手順でやったら、依存パッケージが全て最新のものに上がってしまいましたので、ちゃんとやる場合はpackage.jsonのバージョンを固定しておいた方がいいと思います。また、公式の移行ドキュメントはこちら

init

npm initと同じ感じで対話形式で進みます。既にpackage.jsonがあったので、それに従った内容が表示されてました。

1
yarn init

依存パッケージインストール

addで依存パッケージをインストールしていきます。

1
2
yarn add [package]
yarn add [package] --dev

具体的には下記のような感じ。

1
2
yarn add webpack --dev
yarn add react react-dom @types/react @types/react-dom

package.jsonのタスク(script)は?


これもそのまま動きました。具体的にはpackage.jsonに下記のようなタスクを記述していました。

1
2
3
4
5
6
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch",
"build:production": "webpack --config webpack-production.config.js"
},

これも下記のような感じでnpmのコマンドをyarnに変えただけで動きました。

1
2
npm run build
yarn run build

にゃ~ん


yarnというパッケージ名が被っているのでnyarnにかえようぜ!みたいな話があったと思います。(こちらのIssue参照

公式サイトを見ると猫だらけなので、てっきり「このIssueがきっかけで猫のロゴを採用したのかな?」と思ったのですが、ロゴのコミット日時を見る限りIssueより先にコミットされているので、どうももともと猫押しだったようですね。ロゴも可愛いのでとりあえず、yarnを使って行こうと思います。可愛いは大正義。にゃ~ん。