ややこしい記事タイトルですみません（笑）、ロンラン株式会社 CEO 兼 CTO の武部です。
フロントエンド開発の環境構築には、さまざなやり方がありますよね。
私は Volta を各関係チームで不満なく利用していることと、
前回記事で触れたのですが corepack を利用し、レポジトリ・チーム・CI の pnpm バージョンを統一管理するのがスマートと感じています。
本記事では、次の構成例を示します。
- Volta で Node をバージョン管理
- Volta 管理下の Node 付属の
corepackでpnpmを管理
前準備
すでに pnpm をなんらかの形で管理していると思うので、それをアンインストールしておきます。私はもともと Volta で pnpm を管理していたので、次のコマンドでアンインストールしました。
volta uninstall pnpm
一応、volta list で確認しておくと良いでしょう。which pnpm や pnpm -v してみて uninstall した pnpm をつかんでしまっているようなら、消すかシェル変えるかしましょう。
セットアップ
未導入の方は Volta を導入します。導入手順は OS にもよるので公式サイトご確認ください。
Node をインストールします。インストール対象バージョンはご自身のプロジェクトの package.json をご確認ください。今回私は v20 です。
volta install node@20
corepack をインストールします。
volta install corepack
確認。
% which corepack
/Users/yuichi/.nodebrew/current/bin/corepack
おっと。シェル変えてリトライ。
% which corepack
/Users/yuichi/.volta/bin/corepack
ひとまず OK。次に pnpm を有効化します。
corepack enable
corepack enable pnpm
バージョンを確認。
% pnpm -v
Corepack is about to download https://registry.npmjs.org/pnpm/-/pnpm-8.15.3.tgz.
Do you want to continue? [Y/n]
8.15.3
初回利用時にインストールされるようですね。
インストールされたパスを一応確認。
% which pnpm
/Users/yuichi/.volta/bin/pnpm
本当に合致しているかな？
% cat package.json | grep packageManager
"packageManager": "pnpm@8.15.3",
期待どおり、package.json 記載の pnpm がインストールされていることが確認できました。
関連情報
npm と yarn で同等のことをされているこちらの記事も参考にしてください（私も今回参考にさせて頂きました（笑）。
あと、Volta 公式にある Corepack の使用 に記載の corepack use pnpm@latest は動かなかったです。
Discussion