どっちもよく知らないですが、よく見かけるので使ってみようと思いました。

Yarn (jɑːn - [やよ]ーん) とは何か？

JSのパッケージマネージャ。
- npm のbetterな代替品という感じか。
- Rubyでいう、 bundler みたいなものです。
  - プロジェクトローカルなコマンドインストールも兼ねていて、 bundle exec ~~~ が yarn run ~~~ に相当するみたいな感じ。
- 依存性管理以外は基本やらないので、パッケージングとかは webpack とか使ってください。
並列DL、依存性の正確で再現可能な記録と計算、パッケージの破損チェックがサポートされている。

Webpack とは何か？

なんかWeb系のプロジェクトのモジュールを1ファイルに固めてくれたりするビルドツール。（Cでいうリンカみたいな）
- よくある、依存しているライブラリと、自プロジェクトの複数のJSを1ファイルにまとめる、みたいな用途で特に大した設定もせず使えるので、便利だと思われます。
  - 1ファイルではなく、論理的なグルーピングにくっつけるといったのも可能。
- JS以外も扱えるらしい。
npm install -g webpack でインストールできますが、今回はYarn経由でプロジェクト内にインストールします。

Yarnのインストール

macOS

brew install yarn

Windows

choco install yarn

Linux

パッケージのDL元を追加してインストールせよとのこと。

npm （非推奨）

npm経由でも入れられるようですが、非推奨とのこと。

Note: Installation via npm is generally not recommended. npm is non-determinstic, packages are not signed, and npm does not perform any integrity checks other than a basic SHA1 hash, which is a security risk when installing system-wide apps.

For these reasons, it is highly recommended that you install Yarn through the installation method best suited to your operating system.

要するにnpmのパッケージ解決が気まぐれ、しかもパッケージが破損・改変されていても気づけ無いから、おすすめしませんとのことらしいですが、何を今更という気はします。

気にしない人はnpmで入れちゃいましょう。

npm install -g yarn

適当なプロジェクトを開始してみる

(cf. https://yarnpkg.com/en/docs/usage)

test-yarn というプロジェクト名ではじめてみます。

$ mkdir test-yarn
$ cd !$
$ yarn init
yarn init v0.17.10
question name (test-yarn):
question version (1.0.0):
question description:
question entry point (index.js):
question git repository:
question author:
question license (MIT):
success Saved package.json
✨  Done in 8.48s.

中身は package.json だけが作られます。

package.json

{
  "name": "test-yarn",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

ちょうどjQueryしたい気分なので、jQueryへの依存性を追加してみましょう。

$ yarn add jQuery
yarn add v0.17.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
└─ jquery@3.1.1
✨  Done in 0.68s.

最近のCLIは絵文字バリバリなのか…

新たに yarn.lock ファイルと node_modules ディレクトリができました。

$ ls
node_modules	package.json	yarn.lock

yarn.lock　ファイル

yarn.lockファイルを見てみましょう。

$ cat yarn.lock
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


jquery@^3.1.1:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.1.1.tgz#347c1c21c7e004115e0a4da32cece041fad3c8a3"

Rubyで言えば Gemfile.lock のような、依存性バージョンの正確な記録をとっているファイルというのがわかります。

実際開発する場合は、このファイルはバージョン管理に追加しておきましょう。

node_modules/

インストールしたjQueryがここに入っています。

$ ls node_modules/
jquery

実際開発する場合はだいたいは .gitignore 行きのフォルダです。

実際にコード追加＋Webpackでビルドしてみる

jQueryだけでは何もできないので、JSのパッケージングなどのために webpack webpack-dev-server を --dev (開発用依存) で追加します。

$ yarn add webpack webpack-dev-server --dev

webpackの設定ファイルを追加します。（内容的には ./src/app.js をソースに ./bundle.js を出力とする感じ）

webpack.config.js

module.exports = {
  entry: "./src/app.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/build"
  }
}

実コードを追加します。

index.html

<script src="bundle.js"></script>

<body>
</body>

src/app.js

$ = require("jQuery");

$(() => {
  $("body").text("Body has been loaded, yeah.");
});

開発用のローカルWebサーバ webpack-dev-server を立てます。

$ yarn run webpack-dev-server -- --inline --hot

$ # webpack-dev-server の後ろの -- は　yarn run で起動するコマンドに対する引数の指定の明示のために必要。
$ # --inline: ホットリローディング用コード埋め込み方式の指定。inlineだとビルド結果のJSにホットリローディング用コードが差し込まれる。
$ # --hot: ホットデプロイを有効にする。
$ # マニュアル見るかぎり通常、両者を2つ指定しておけばよさげ。

サーバが起動したら、 http://localhost:8080 にアクセスして見てみましょう。

ホットリローディングが有効になっているので、コードを書き換えて保存すれば画面が勝手に書き換わります。

ちゃんとビルドする場合は単体のwebpackを起動しましょう。

$ yarn run webpack
yarn run v0.17.10
$ "/Users/owner/test-yarn/node_modules/.bin/webpack"
Hash: f2cbb67337639c5656fd
Version: webpack 1.14.0
Time: 269ms
    Asset    Size  Chunks             Chunk Names
bundle.js  277 kB       0  [emitted]  main
   [0] ./src/app.js 91 bytes {0} [built]
    + 1 hidden modules
✨  Done in 0.61s.

（おまけ） yarn のコマンド一覧ざっと見

access

現在開発中のコマンドっぽい。謎。

Usage: yarn access [public|restricted|grant|revoke|ls-packages|ls-collaborators|edit] [flags]

add / remove

パッケージへの依存性追加・削除。

https://yarnpkg.com/en/docs/cli/add
https://yarnpkg.com/en/docs/cli/remove

bin

プロジェクト/node_modules/.bin フォルダをプリントするだけっぽい。

yarn run webpack は $(yarn bin)/webpack というようにも書けるのでしょう。

cache

Yarnのパッケージのキャッシュディレクトリ（macOSだと ~/Library/Caches/Yarn ）のパスや中身を表示するようです。

check

package.json とYarnのロックファイルの内容が一致しているかチェックします。 --integrity でパッケージのハッシュチェックもできるようです。

clean

node_modules ディレクトリからもはや要らないファイルを消し、 .yarnclean というファイル（要バージョンコントロール）を吐き出すようです。

config

git config　的なYarnの設定管理コマンド。

generate-lock-entry

yarn.lock にあたる内容を標準出力に出すっぽい。

global

yarn global add モジュール が npm install -g モジュール 相当の動きをするっぽい。

ただ、PATHに export PATH="$(yarn global bin):$PATH" 相当をつけないと、おそらくそのまま実行するのは無理っぽい。

info

yarn info パッケージ名 で該当パッケージの情報を表示。

init

対話式プロジェクト初期化用コマンド。

install

依存関係のダウンロード用コマンド。

licenses

yarn licenses ls で各依存パッケージのライセンスを表示。

yarn licenses generate-disclaimer で各依存パッケージ全てのライセンスライセンス条項文を表示。

link / unlink

今いるパッケージディレクトリへのシンボリックリンクを、他のパッケージディレクトリの node_modules/ の下に作成することができます。

login / logout

npm リポジトリへのログイン・ログアウト.

https://yarnpkg.com/en/docs/cli/login
https://yarnpkg.com/en/docs/cli/logout

ls

現プロジェクトの依存ツリーを表示。

outdated / upgrade / upgrade-interactive

outdated　で更新のあるパッケージを表示。 upgrade で更新をかける。

https://yarnpkg.com/en/docs/cli/outdated
https://yarnpkg.com/en/docs/cli/upgrade

owner

レジストリ中のパッケージの所有者についての機能らしいですが、よくわかりませんでした。

pack

プロジェクトを .tar.gz に固める。

publish

npmにパッケージをぶち込む。

run

yarn add などで追加したもののうちコマンド( yarn run か ls $(yarn bin) で確認可能)をこれ経由で実行するためのもの。

self-update

Yarn自身のアップグレード。

tag

パッケージに対して、バージョン番号ではなく、かわりのタグ(stableとか)を指し示すためのコマンド。

team

レジストリ中のパッケージのチームのメンバーシップ管理、とあるけれど、よくわかりません。

version

現プロジェクトのバージョン情報の変更。

versions

yarn および依存パッケージのバージョン番号の表示。

why

直接依存・推移的依存など、どういう理由でそのパッケージに依存が発生しているのかを表示するためのコマンド。

$ yarn why uuid

yarn why v0.17.10
[1/4] 🤔  Why do we have the module "uuid"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
info This module exists because "webpack-dev-server#sockjs" depends on it.
info Disk size without dependencies: "60kB"
info Disk size with unique dependencies: "60kB"
info Disk size with transitive dependencies: "60kB"
info Amount of shared dependencies: 0
✨  Done in 0.26s.