Help us understand the problem. What is going on with this article?

yarn (+ webpack) を使ってみる

More than 3 years have passed since last update.

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

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

https://github.com/yarnpkg/yarn

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

Webpack とは何か?

https://webpack.github.io/

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

Yarnのインストール

macOS

brew install yarn

Windows

choco install yarn

Linux

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

https://yarnpkg.com/en/docs/install#linux-tab

npm (非推奨)

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

https://yarnpkg.com/en/docs/install#alternatives-tab

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 にアクセスして見てみましょう。

image

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

  1. image
  2. image

ちゃんとビルドする場合は単体の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 のコマンド一覧ざっと見

https://github.com/yarnpkg/yarn/tree/0f1db96846badbbe3b43c470c05196eb29437fb4/src/cli/commands

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 というようにも書けるのでしょう。

https://yarnpkg.com/en/docs/cli/bin

cache

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

https://yarnpkg.com/en/docs/cli/cache

check

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

https://yarnpkg.com/en/docs/cli/check

clean

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

https://yarnpkg.com/en/docs/cli/clean

config

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

https://yarnpkg.com/en/docs/cli/config

generate-lock-entry

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

https://yarnpkg.com/en/docs/cli/generate-lock-entry

global

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

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

https://yarnpkg.com/en/docs/cli/global

info

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

https://yarnpkg.com/en/docs/cli/info

init

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

https://yarnpkg.com/en/docs/cli/init

install

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

https://yarnpkg.com/en/docs/cli/install

licenses

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

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

https://yarnpkg.com/en/docs/cli/licenses

link / unlink

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

https://yarnpkg.com/en/docs/cli/link

login / logout

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

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

ls

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

https://yarnpkg.com/en/docs/cli/ls

outdated / upgrade / upgrade-interactive

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

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

owner

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

https://yarnpkg.com/en/docs/cli/owner

pack

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

https://yarnpkg.com/en/docs/cli/pack

publish

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

https://yarnpkg.com/en/docs/cli/publish

run

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

https://yarnpkg.com/en/docs/cli/run

self-update

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

https://yarnpkg.com/en/docs/cli/self-update

tag

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

https://yarnpkg.com/en/docs/cli/tag

team

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

https://yarnpkg.com/en/docs/cli/team

version

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

https://yarnpkg.com/en/docs/cli/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.

https://yarnpkg.com/en/docs/cli/why

knjname
Zenn: https://zenn.dev/knjname
http://knjname.hateblo.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away