メインコンテンツまでスキップ

pnpmを知ろう！Node.jsのパッケージマネージャーの新しい選択肢

· 約5分
moritalous

遅ればせながら、pnpmの存在を最近知りました。使ってみたところ、かなり気に入りましたので紹介します！

pnpmとは？​

公式サイトでは　高速、かつディスク容量効率が良いパッケージマネージャー と紹介されています。

Fast, disk space efficient package manager | pnpm
https://pnpm.io/

特徴として以下の4つが挙げられています。

  • 速い
    • pnpmは他のツールよりも最大で2倍高速です
  • 効率的
    • node_modules 内のファイルは単一のコンテンツアドレス指定可能なストレージから複製またはハードリンクされます。
  • モノリポ をサポート
    • pnpm はリポジトリ内マルチパッケージをサポートしています
  • 厳格
    • デフォルトで、pnpm はフラットでない node_modules を作成するので、コードは任意のパッケージにアクセスできません。

効率的の詳細な解説です。

npmでの管理の場合、プロジェクトごとにnode_modulesディレクトリが作成され、パッケージが格納されます。pnpmでは単一の場所にパッケージが格納され、それぞれのパッケージのnode_modulesディレクトリにはハードリンクが作成されます。その結果、プロジェクトが多くなってもディスク消費を抑えることができます。

インストール​

インストール方法は複数用意されており、npmを使ったインストールも可能です。（ドキュメント）

スタンドアローンスクリプトも用意されています。

shell
curl -fsSL https://get.pnpm.io/install.sh | sh -

これだけでインストール完了です。

実行ファイルは~/.local/share/pnpmにインストールされ、自動で~/.bashrcにパス設定も追加されます。

# pnpm
export PNPM_HOME="/home/vscode/.local/share/pnpm"
case ":$PATH:" in
  *":$PNPM_HOME:"*) ;;
  *) export PATH="$PNPM_HOME:$PATH" ;;
esac
# pnpm end

シェルの再ログインまたは、source ~/.bashrcでpnpmコマンドが使えるようになります。

pnpm CLIの使い方​

プロジェクトの生成（pnpm init）​

npm initと同様の方法でプロジェクトの生成ができます。

まずはディレクトリを作成します。

mkdir project01
cd $_

package.jsonを生成します。

pnpm init
package.json
{
  "name": "project01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

プロジェクトの生成（pnpm create）​

createコマンドも用意されています。

  • Create React App
pnpm create react-app my-app
注意

自動でnpm installが実行されますのでプロジェクト作成技、node_modulesディレクトリを削除した後、pnpm iを実行しましょう。

  • Create Next App
pnpm create next-app

パッケージの追加（pnpm add <pkg>）​

npm i <pkg>に相当するコマンドはpnpm add <pkg>です。

Command内容
pnpm add <pkg>dependenciesに保存
pnpm add -D <pkg>devDependenciesに保存
pnpm add -O <pkg>optionalDependenciesに保存
pnpm add -g <pkg>グローバルに保存

パッケージのインストール（pnpm install）​

npm iと同様の動作となります。

パッケージの更新（pnpm update）​

pnpm updateはpackage.jsonの指定に基づいてパッケージを更新します。

pnpm update --latestと指定するとpackage.jsonの指定を無視してlatestに更新します。

Node.jsのインストール（pnpm env <cmd>）​

pnpmを使ってNode.jsのインストールもできます。

shell
pnpm env use --global lts
注記

--global指定を行わないとエラーとなります

ltsの部分はlatestや16、16.0.0など指定が可能です。

複数バージョンのNode.jsをインストールし、切り替えて実行することも可能です。

$ pnpm env list
  18.16.0
$ pnpm env use --global latest
Fetching Node.js 20.1.0 ...
Node.js 20.1.0 is activated
/home/vscode/.local/share/pnpm/node -> /home/vscode/.local/share/pnpm/nodejs/20.1.0/bin/node
$ node -v
v20.1.0
$ pnpm env list
  18.16.0
  20.1.0
$ pnpm env use --global 18.16.0
Node.js 18.16.0 is activated
/home/vscode/.local/share/pnpm/node -> /home/vscode/.local/share/pnpm/nodejs/18.16.0/bin/node
$ node -v
v18.16.0
$

アンインストールはremoveコマンドです。

shell
pnpm env remove --global 20.1.0

まとめ​

ディスク使用量を抑えられるところがとても気に入っています。Create React Appのように内部スクリプトで自動的にnpmを使用するものもあるので、プロジェクト内に複数のパッケージマネージャが混在することもあるのため、環境に合わせて選定することが重要です。