pnpmの基本的な使い方

今更ながらnpmからpnpmに乗り換えたので基本的な使い方を自分のためにまとめておきます。

インストール

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

pnpm init : プロジェクトの初期化

# --init-type <commonjs|module>
#   commonjs: CJS(CommonJS) (旧来のNode.js)
#     モジュールの読み込みに require を利用
#   module: ESM(ECMAScript Modules) (推奨)
#     モジュールの読み込みに import を利用
pnpm init --init-type module

pnpm add <pkg> : 指定したパッケージをインストールする

# dependencies に保存
pnpm add sax

# devDependencies に保存
pnpm add -D sax

# グローバルにインストール
pnpm add -g sax


# 配布タグを指定してインストール
# latest: デフォルト。安定版
# next: 次期リリース (RC, beta, 開発版のこともある)
# beta: ベータ版
# canary: 正式リリース前の超早期版（極めて実験的なビルド）
pnpm add sax@next

# バージョンを指定してインストール
pnpm add sax@3.0.0

pnpm install : プロジェクトに必要なすべての依存関係をインストールする

# dependencies, devDependenciesすべてをインストール
pnpm install

# dependenciesのみインストール。devDependenciesにリストされているパッケージは削除
pnpm install -P

# devDependenciesのみをインストール。dependenciesにリストされているパッケージは削除
pnpm install -D

lockファイルに厳密に従いインストールしたい場合 (CICD用)

# npm ci 相当
pnpm install --frozen-lockfile

pnpm update : 指定された範囲に基づいてパッケージを最新バージョンに更新

# package.jsonで指定された範囲に従って、すべての依存関係を更新
pnpm update

# すべての依存パッケージを最新バージョンに更新
pnpm update --latest

# 特定のパッケージを指定したバージョンに更新
pnpm update foo@2  # 2.x系の最新

# スコープ内のすべての依存関係を更新
pnpm update "@babel/*"

# その他のオプション
# --global, -g : グローバルパッケージを更新
# --prod, -P : dependencies および optionalDependencies に指定されたパッケージのみを更新
# --dev, -D : optionalDependencies に指定されているパッケージは更新しません。

pnpm remove : node_modules/ package.json からパッケージを削除する

# パッケージを削除
pnpm remove sax

# その他のオプション
# --global, -g : グローバルパッケージを削除
# --save-dev, -D : devDependencies からのみ依存関係を削除
# --save-prod, -P : dependencies セクションからのみ依存関係を削除します。

pnpm run : package.json で定義されたスクリプトを実行

package.json

"scripts": {
    "watch": "webpack --watch"
}

# package.jsonに定義されたwatchコマンドを実行
pnpm run watch

# run は省略することもできる
pnpm watch

pnpm exec : プロジェクトのスコープ内でシェルコマンドを実行

node_modules/.bin 配下のコマンドを実行するときに利用します。

# node_modules/.bin/jestを実行
pnpm exec jest

# exec は 省略可能
pnpm jest

pnpm dlx : 依存をインストールせずにダウンロードしてコマンドを実行

依存関係としてインストールせずにレジストリからパッケージを取得し、ホットロードした後、デフォルトで提供されているコマンドバイナリを実行します。

# Vueをインストールすることなく、create-vueでVueプロジェクトを初期化したい場合
pnpm dlx create-vue my-app

# pnpxというエイリアスでも利用可能
pnpx create-vue my-app

# パッケージのバージョンを指定することもできます
pnpm dlx create-vue@next my-app

例えば、別のプロジェクトにインストールすることなく Vue プロジェクトを初期化するために create-vue をどこでも使用したい場合は、以下のコマンドを実行できます

pnpm create : プロジェクトの作成

create-* または @foo/create-* スターターキットを使用してプロジェクトを作成します。

# create-react-app(https://www.npmjs.com/package/create-react-app) でReactプロジェクトを初期化
pnpm create react-app my-app

# create-vite(https://www.npmjs.com/package/create-vite) で Typescriptプロジェクトを初期化
# pnpm create vite --help で指定できるオプションを確認できます
pnpm create vite my-app --template vanilla-ts

pnpm start : プログラムを起動

package.json の scripts.start プロパティで指定された任意のコマンドを実行します。存在しない場合は node server.js を実行します。