JavaScript パッケージマネージャー pnpm を触ってみる

こんにちは、 Gaji-Labo フロントエンドエンジニアの石垣です。

今回は、 JavaScript パッケージマネージャーの1つである pnpm を触ってみたので、その特徴と導入方法についてまとめたいと思います。

pnpm とは？

pnpm は npm や yarn のような JavaScript パッケージマネージャーの一つです。

npm や yarn と比較して、以下の違いがあります。

1. ディスク容量が節約できる
2. インストールが速い
3. プロジェクトの直接の依存関係のみをモジュールディレクトリの直下に追加する

ディスク容量が節約できる

npm や yarn を使用すると各プロジェクトごとに node_modules が作られ、それぞれに必要なパッケージがインストールされます。そのため、複数のプロジェクトで同じパッケージを使っていてもそれぞれのプロジェクトの node_modules にインストールされ、結果的にディスク容量が消費されてしまいます。

pnpm は必要なパッケージをグローバルな場所にインストールし、リンクすることでディスク容量を節約します。これにより、同じパッケージを複数のプロジェクトで使用している場合でも、ディスク容量を節約することができます。パッケージは MacOS では ~/Library/pnpm/store/v3 にインストールされます。

インストールが速い

node_modules にパッケージを直接インストールしないので、結果的にインストールが速くなります。

具体的な速度の例として、 create-next-app で作成した Next.js プロジェクトで node_modules と lock file が存在しない状態でインストールを試みると、npm では7秒で完了したのに対して pnpm では3.8秒で完了しました。

プロジェクトの直接の依存関係のみをモジュールディレクトリの直下に追加する

npm や yarn はプロジェクトへの依存関係として追加されていないパッケージもモジュールディレクトリの直下に入りますが、 pnpm はプロジェクトの直接の依存関係のみをプロジェクトに追加します。これによりプロジェクトのディレクトリ構造が簡潔に保たれ、またプロジェクトのコードからは直接依存しているパッケージのみアクセスできるので不用意にパッケージにアクセスすることを防げます。

以下が create-next-app で作成した Next.js プロジェクトのインストール後のディレクトリ構造です。pnpm を使ったプロジェクトでは @babel など直接 dependencies に入っていないモジュールはディレクトリにないことがわかります。これらは .pnpm ディレクトリに格納されており、中身はグローバルな場所にインストールされたパッケージへのリンクになっています。

npm

pnpm

実際に使ってみる

Node.js 環境では npm でインストールできます。その他、Homebrew 等でのインストールにも対応しています。

$ npm install -g pnpm

コマンドについて

コマンドの書式は独自のものになっていますが、npm のコマンドの頭に p を付けて実行してもエイリアスが働きます。

例えば npm i <pkg> は pnpm では pnpm add <pkg> と同等ですが、pnpm i <pkg> でもインストール可能です。互換性があるのでそれほど移行コストがかからないと感じます。

使ってみた感触

ディスク容量の節約という面やインストールの速さを考えると新しいプロジェクトを始める際は pnpm が第一候補になりそうです。

ただ、既存のプロジェクトに導入する際は node_modules の構造が変わるので注意が必要なのと、npm や yarn に比べるとドキュメントが少ないのが懸念点かなと思いました。

今後も使ってみて、また感触が分かれば記事にしたいと思います。

第8回LT練習会（仮）の視聴参加者を募集しています

この記事は第7回LT練習会（仮）で発表した内容を修正・追記したものです。

第8回LT練習会が5月17日（水）に開催されますので、ぜひ視聴していただければと思います！