npmとyarnとpnpmの違い2021

(Last Update: 2022/02/03)

npm と yarn(v1) と pnpm （とyarn v2）の違いについて記述します。

Versions

npm	Yarn	pnpm
7.4.3	1.22.5	5.16.0

各パッケージの特徴

npm

npmはnpm社が提供する、JavaScriptパッケージマネージャーです。

npmというコマンドラインで動作するプログラムでパッケージを管理できます。いわばnpm公式のパッケージマネージャーとなります。

Windows等でインストールするとNode.jsに同梱されています。

Yarn

Yarnはnpmより後発のJavaScriptパッケージマネージャーです。

元々、npmにはインストール時のパッケージバージョンの非再現性やパフォーマンス上の問題、セキュリティの問題が山積しており、それを解決するために開発がスタートしました。

いわば、サードパーティのnpmということになります。

• ライセンスの列挙
• yarn why

など、npm単体にはない独自機能が含まれています。

現在では

• インストール速度の改善
• Lockfile
• Workspaces
• upgrade-interactive (ncu)
• コマンドエイリアスの整理

など、npm側にYarnの多くの機能が取り込まれ、実質的な機能の差はほとんどなくなっています。

現在は、Zero-installによる高速化とnode_modulesの肥大化を抑えるYarn v2(berry)が開発されています。

• コマンド(npm installとyarn add)
• ロックファイル(package-lock.jsonとyarn.lock)

などに細かな差異があります。

pnpm

npmの代替として開発されているパッケージマネージャーです。インストールの速さと効率性に主眼を置いています。

Yarnと同様に、 サードパーティのnpm にあたります。

最大の特徴は、同じファイルを複数のプロジェクト間でシンボリックリンクやハードリンクで管理することです。これにより、node_modulesの肥大化を抑えたり、インストールを高速化したりすることに成功しています。

機能の違い

npxは該当するコマンドをダウンロードして実行する

npx prettierのようにコマンドを実行すると、ローカルにprettier パッケージが存在しない場合はその場で依存関係を解決してから実行します。

対してyarn run は、該当するコマンドかパッケージが存在しなければエラーとなります。

npxは、その場で不足しているパッケージを勝手にダウンロードしてくれるので便利です。反面、ミスタイプなどで意図しないパッケージを実行してしまうという懸念があります。コマンドラインでのコマンドは気をつけて実行しろ、と言われればそれまでですが。

pnpmは容量を削減する

node_modulesは肥大化すると数万ファイル、容量は数百MBを超えるのがざらです。

プロジェクトが巨大化すればするほど、取り回しが悪くなってきます。

pnpmでは、複数プロジェクト間で共通するファイルをシンボリックリンクやハードリンクで管理します。インストールが高速で、かつ容量の消費を大きく抑えます。

主なコマンド

Command	npm	Yarn	pnpm
初期化	npm init	yarn init	pnpm init
パッケージ追加(react)	npm install react , npm i react	yarn add react	pnpm install react , pnpm i react
Devパッケージ追加(@types/react)	npm install --development @types/react , npm i -D @types/react など	yarn add -D @types/react	pnpm install --development @types/react , pnpm i -D @types/react など
パッケージ削除	npm uninstall react , npm r react など	yarn remove react	pnpm uninstall react , pnpm r react など
Lockfileからインストール	npm ci	yarn install	pnpm i
スクリプト実行(build)	npm run build	yarn run build, yarn build	pnpm run build
パッケージ実行(prettier)	npx prettier	yarn prettier	pnpx prettier

過去～現在までに筆者が遭遇した問題点

npmが遅い

全体的には、pnpmが最速、次にYarnが速いです。npmは以前より大幅に改善されたものの、やや遅いです。

Benchmarks of JavaScript Package Managersより引用します。

action	cache	lockfile	node_modules	npm	pnpm	Yarn	Yarn PnP
install				34s	14.1s	33.4s	22.8s
install	✔	✔	✔	7.4s	1.5s	734ms	n/a
install	✔	✔		17.3s	3.9s	10.7s	1.8s
install	✔			23.7s	6.5s	21.5s	11.9s
install		✔		21.7s	11.4s	22.1s	13.4s
install	✔		✔	6.6s	1.8s	16.7s	n/a
install		✔	✔	7.2s	1.4s	722ms	n/a
install			✔	6.5s	5.6s	32.8s	n/a
update	n/a	n/a	n/a	7.1s	10.9s	31.5s	23.4s

既にnode_modulesが存在してlockfileが存在しないパターンでのみ、yarnよりもnpmの方がインストールは速いですが、普通はnode_modulesがあればlockfileは生成されていることがほとんどです。

pnpmはupdateを除きnpmよりも高速です。

ただし、パッケージマネージャーを使っている時間はそんなにないという意見もあります。

yarn.lockの形式が変わった

yarn.lock の形式が特定のバージョン更新時に変わっていることがあるため、複数バージョンのyarnが混在していると yarn.lock に毎回差分が出てしまいます。

これは、古くからYarnを使用しているプロジェクトで問題になります。

解決策としてはYarnのバージョンを開発者間で揃えることですが、複数のプロジェクトを開発している場合、いちいちyvm などを使ってバージョンを切り替えることになり煩雑です。

（2021/01/29追記）
https://twitter.com/azu_re/status/1354614651867160584

yarn policies set-version を使うことにより、Yarnのバージョンを固定できるようです！

@azu_re さん、情報提供ありがとうございます。
（追記終わり）

pnpifyでVSCodeのLanguage Serverがうまく動かない

Yarn v2ではPlug'n'Play という仕組みが導入されています。これは、node_modules を直接参照するWebpackのようなパッケージを無理やり動かすための仕組みです。

しかし、リリース直後ではTypeScriptのLanguage Serverが上手く動かず、VSCodeで機能しませんでした。

今後も、新しいパッケージがYarn v2でテストされているかどうかが怪しいですし、毎回プラグインを挟んでまでYarn v2を使うメリットは薄いです。

npmとの仕組みと大きく乖離したYarn v2は現状おすすめできません。(ほぼ似た仕組みのnpm v8がリリースされればまた状況は変わるでしょうが)

npmでレイオフが発生した

https://twitter.com/fharper/status/1111694552262459393

npm社の社員であり、npmのFrédéric Harper氏が2019年に解雇されました。その後も次期npmであるtink(現在はnpm v8に向けて統合)の開発が滞るなど、npmの将来性に問題が生じた過去があります。

なお、現在はnpm社はGitHubが買収し、Microsoftの孫会社となっています。

特定のライブラリがpnpmに標準で非対応だったり、情報がない場合がある

(2021/02/08 追記)
npmとYarnには対応しているが、最後発であるpnpmには標準対応していないライブラリがあります。

例えば、StorybookはnpmとYarnには標準対応していますが、pnpmで pnpx sb init しようとするとnpmでインストールしようとするため、結果的にインストールに失敗します。そのため、手動でセットアップする必要があります。

このように、pnpmはまだ普及しきっているとは言えない状況のため、npmやYarnコマンドに依存したライブラリはpmpnを使うとひと工夫要求されたり、自力での解決が必要になります。
(2021/02/08 追記終わり)

古くなった情報

Yarnはworkspaceが使える

npm v7で、npmでもworkspaces が使えるようになりました。

Performance

筆者のおすすめ

初心者、もしくは複数人開発であればnpm をおすすめします。

• 標準ツールのため、Nodeと一緒に複数人でバージョンを揃えやすい
• nodeを入れれば追加でのインストールが不要
• 標準ツールのため、信頼性があり、ドキュメントも多い
• 現在はインストールがそこまで遅くはない
• 開発でパッケージマネージャーを触ることは最初期や機能追加以外は少ない

個人開発であればpnpmかYarn(v1) をおすすめします。

• パッケージのインストール、アンインストールが早く、初期の試行錯誤がしやすい
• pnpmではnode_modulesのサイズが小さくなり、容量を圧迫しない

参考資料

• InfoQ - pnpm: スペース効率に優れたJavaScriptパッケージマネージャ (最終閲覧: 2021/01/28)
• 【JS】yarnの長所とyarnからnpmに戻ってきた理由 | JavaScriptに関するお知らせ (最終閲覧: 2021/01/28)
• Yarn：Facebook発のパッケージマネジャーはnpmに代わるスタンダードになるか - WPJ (最終閲覧: 2021/01/28)

更新履歴

2022/02/03 タイポを修正