【yarn】パッケージマネージャをpnpmに切り替えてみる

JavaScript

こんにちは、しきゆらです。
今回は、ずっと使っていたyarnからpnpmに乗り換えたのでメモしておきます。

ハンズオンNode.js/今村謙士
¥4,070 （2026/01/24 21:52時点 | Yahooショッピング調べ）
Amazon
＼楽天ポイント4倍セール！／
楽天市場
＼商品券4%還元！／
Yahooショッピング

なぜ切り替えるのか

これまでずっとyarnを使ってきました。
基本的にはインストールが速いのでこれを使っていましたが、ここ最近困ることが出てきた。

VSCodeでSvelteを書いていると、その中のスクリプトで無駄にエラーがでる部分がありました。
以下のようなエラーが出るようになり、調べてもそれらしい対処方法が出てこなかったのが、今回の要因です。

Cannot find package '@sveltejs/adapter-static' imported from /app/svelte.config.js

yarnを使っていて、無駄にエラーが出てきて設定を変えたりコマンド実行して対処したりすることが多々ありました。
既存ツールを使い続けるよりも他のツールに乗り換えた方が無駄なエラーに煩わされることが減りそう、ということで他のツールについても調べてみました。

  • npm: デフォルトで使える、昔の遅いイメージしかない
  • yarn: パッケージインストールの速度が速い、管理方法が独自
  • pnpm: インストールが速い、パッケージを1か所で管理しシンボリックリンクで参照するのでディスクスペースを削減できる
  • bun: パッケージ管理だけでなく、JSのランタイム・ビルド・テストランナーの一体化したツール

ということで、この中で既存の環境を大きく変えずに導入できそうなpnpmをインストールしてみました。
その手順をまとめておきます。

インストール手順

手順としては、基本的に以下に従います。

いつかのyarnをインストールするときと似たような感じで追加可能です。
2026/01/23現在、10.28.1と表示されるはずです。

npm install --global corepack@latest
corepack enable pnpm

pnpm --version

Yarnからpnpmに切り替える

yarnからpnpmに切り替えるための手順をまとめておく。

旧世代の遺物を削除

すでにyarnで管理しているプロジェクトにて、pnpmを使うようにする方法もメモしておきます。
まずは、既存のツールで利用していたファイル・フォルダを削除しておきます。

$ rm -rf node_modules # npm等を使っている場合
$ rm -rf .pnp* .yarn # Yarn v3・v4系を使っている場合

また、yarnを使っている場合、package.jsonにpackageManagerの記述があれば、不要なので削除しておく。

既存パッケージのバージョンをインポート

package-lock.jsonやyarn.lock等の情報を引き継ぐ。

$ pnpm import

pnpmを使ったパッケージインストール

他のツールと大きく変わらず、以下でよい。

$ pnpm install 
...
╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│                                                                                            │
│   Ignored build scripts: esbuild@0.25.12.                                                  │
│   Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.   │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯

ワーニングがでますが、確認して問題なければ実行してしまえばよいでしょう。

ひとまずはこれで完了。
合わせて、この段階で既存のlockファイルは削除しても問題ありません。
不要なので削除しておきましょう。

コマンド実行等にはこれまでのパッケージマネージャからpnpmに置き換えればよいだけです。

$ yarn build
$ pnpm build // 切り替え後もほぼ同じように呼び出せる

このように実行して、エラー等なく実行完了すれば完了です。

pnpmに入れ替えた後について

序盤に書いた以下のエラーについては、発生しなくなりました。

Cannot find package '@sveltejs/adapter-static' imported from /app/svelte.config.js

単純に、VSCodeなどがyarnでインストールしているものをうまいこと参照しきれていないのが原因でした。
もちろん、事前に以下のコマンドは実行後です。

pnpmの構成はnpmとも異なりますが、yarnのPnPほどではありません。

まとめ

今回は、普段使っているパッケージ管理ツールをyarnからpnpmに切り替えてみました。
結果として、手元で発生していたエラーは解消できました。
また、まだ確認していませんが、今回対象としていたプロジェクト以外もpnpmに置き換えることで、パッケージ関連の容量を削減できるはずです。
無駄にあちこちに似たようなファイルを置いておかなくてもよい、というのは精神衛生上よい話かなと思います。

・・・そして、インストール後に気づきましたが、yarnもnode_modulesで管理する方法があるので、そっちに切り替えてもよかったかもしれません。
そっちの方が影響範囲としては小さいので、いきなり切り替える必要もなかったかもしれません。

まぁ、触ったことがないものに触る機会が得られたので、ひとまずは良かった、としておきましょう。

ハンズオンNode.js/今村謙士
¥4,070 （2026/01/24 21:52時点 | Yahooショッピング調べ）
Amazon
＼楽天ポイント4倍セール！／
楽天市場
＼商品券4%還元！／
Yahooショッピング

今回は、ここまで。

おわり

Posted by しきゆら