pnpmとnpmの比較:実際に何が違うのか
pnpmとnpmの比較
pnpmとnpm:保存方法、ロックファイル、ワークスペース、コマンド対応表 | We.Inc
pnpmとnpmがパッケージを保存し、バージョンを固定し、モノレポを扱う方法の違い、検索できるnpmからpnpmへのコマンド変換表、プロジェクトを安全に移行する正確な手順を紹介します。
npmはすべてのパッケージを各プロジェクトのnode_modulesにコピーし、フラットに巻き上げます。pnpmはディスク上に内容アドレス方式のストアを1つ持ち、そこからファイルをハードリンクし、node_modulesの最上位には直接の依存関係だけを置きます。これによりディスク容量を節約でき、コードが宣言していないパッケージをインポートするのを防げます。ほとんどのコマンドは1対1で対応します。
主な違い
- パッケージのファイルの置き場所
- 各プロジェクト内のコピー
- 1つの共有ストアから各プロジェクトにハードリンク
- モジュールフォルダーの構造
- フラットで、すべて巻き上げ
- 直接の依存関係のみ。残りはnode_modules/.pnpmの下
- CI(継続的インテグレーション)での厳密なインストール
- npm ci
- pnpm install(CIではfrozen lockfileがデフォルト)
- インストールせずにパッケージを実行
- pnpm dlx(pnx、pnpxも可)
どちらのツールも同じpackage.jsonを読み、同じレジストリからインストールするので、選択のポイントは、構造、2回目以降のインストール速度、モノレポ用の機能、厳密さです。以下では、それぞれのパッケージの保存方法、使い慣れたコマンドの変換表、既存のプロジェクトをnpmからpnpmへ移行する手順を紹介します。
- 変換表にnpmのコマンドを入力するか、例のいずれかをクリックすると、pnpmで対応するコマンドが表示されます。
- 保存方法のセクションを読むと、pnpmのインストールがディスクを節約し、宣言していないインポートを検出できる理由がわかります。
- 移行すると決めたら移行手順に従い、新しいロックファイルをコミットします。
- リポジトリごとにパッケージマネージャーを1つに決め、もう一方のロックファイルは削除しましょう。古いロックファイルから誰かがインストールすることを防げます。
- 継続的インテグレーション環境では、pnpm installは古くなったロックファイルを更新しようとしないので、package.jsonを変更するたびにpnpm-lock.yamlをコミットしましょう。
- 宣言していないものをインポートしているせいでpnpmでパッケージが動かない場合は、上流に報告しましょう。そのインポートはnpmでたまたま動いていただけです。
- pnpmは「run」という単語なしでスクリプトを実行できるので、スクリプト名がpnpmの組み込みコマンドと重ならない限り、pnpm devで動きます。
よくある質問
pnpmはnpmより速いですか?
pnpmはストアにすでにあるファイルを再利用することが多く、同じマシンでの2回目以降のインストールに有利です。速度はキャッシュの状態、ネットワーク、プロジェクトの規模によって変わるので、公開されているベンチマークに頼らず、自分のプロジェクトで両方を計測しましょう。
package-lock.jsonがあるプロジェクトでpnpmを使えますか?
はい。pnpm importを実行すると、package-lock.json、npm-shrinkwrap.json、yarn.lockからpnpm-lock.yamlが作られます。その後、古いロックファイルと依存関係のフォルダーを削除し、pnpm installを実行します。
pnpmに切り替えた後、アプリがモジュールを見つけられないのはなぜですか?
自分のコードか依存関係のどれかが、自身のpackage.jsonに記載されていないパッケージをインポートしています。npmのフラットな構造がその間違いを隠していたのです。インポートしている側の依存関係として、足りないパッケージを追加しましょう。
pnpmにはNode.jsのインストールが必要ですか?
pnpmのインストールドキュメントでは、pnpm 12はネイティブの実行ファイルで、それ自体の実行にNode.jsは不要だと説明されています。もちろん、プロジェクトのスクリプトには引き続きNode.jsが必要です。
初心者はどちらを使うべきですか?
npmです。Node.jsに同梱されており、ほとんどのチュートリアルで使われています。モノレポを運用する、1台のマシンで多くのプロジェクトを扱う、より厳密なモジュールフォルダーの構造が欲しい、といった場合にpnpmへ移行しましょう。
それぞれのパッケージの保存方法
- npmは各依存関係の完全なコピーをプロジェクトのnode_modulesに書き込み、入れ子の依存関係をできる限り最上位に引き上げます。同じライブラリを使う10個のプロジェクトは、10個のコピーを持つことになります。
- pnpmは各ファイルを、グローバルな内容アドレス方式のストアに1回だけダウンロードします。プロジェクトはそのファイルへのハードリンクを持つので、同じバージョンを使う2つ目のプロジェクトはほとんど追加の容量を使わず、新しいバージョンでも変更されたファイルだけが追加されます。
- プロジェクト内では、pnpmは直接の依存関係へのシンボリックリンクをnode_modulesに置き、それ以外はすべてnode_modules/.pnpmの下に置きます。パッケージは自分が宣言したものにしかアクセスできません。
ワークスペースとモノレポ
- npmのワークスペースはルートのpackage.jsonに記載し、-w nameか--workspacesで実行します。pnpmはpnpm-workspace.yamlに記載し、--filterで選択します。--filterは依存関係のグラフも理解するので、たとえばあるパッケージとその依存先すべてを選ぶことができます。
- pnpmのworkspace:プロトコルは、依存関係をローカルのパッケージに固定し、レジストリへのフォールバックを拒否します。公開するときは、通常のバージョン範囲に変換されます。
プロジェクトをnpmからpnpmに切り替える
移行の手順
pnpm importはnpmのロックファイルを読み込むので、すでにテスト済みのバージョンをそのまま使えます。コミットする前にテストを実行しましょう。
ここで一致したフォルダーはすべてワークスペースのパッケージになります。このファイルはリポジトリのルートに置きます。
ローカルのパッケージに依存する
workspace:*は、レジストリのバージョンではなく、常にローカルのuiを参照します。
npmからpnpmへのコマンド変換
npmのコマンドを入力
npm install -D vite
pnpmでの対応コマンド
直接対応するものはありません。その他のnpmコマンドの多くは、pnpmでも同じ名前のままです。
npmのコマンドとpnpmでの対応コマンド
コピー
無料で始める · クレジットカード不要
関連: ガイド|Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る