😊

pnpmをインストールしてAngularで使う

2021/03/21に公開

pnpmって知ってる？

自分はWebStorm2020.3の「pnpmのフルサポート」したという新機能一覧を見て初めて存在を知ったのですが、npm互換のパッケージ管理ツールです。

どんな特色があるかというと Fast, disk space efficient package manager です。
キャッチコピーをそのままコピペ。

npmに比べて2倍速いとかnode_modulesが効率的とかで、ブラックホールより深いと言われるnode_modulesが効率よくなるなら導入しない理由もないので導入してみました。つまるところただの興味本位。

全然関係ないけど、公式サイトに載ってる使用している企業一覧ってどうやったら載せてもらえるんだろう。スポンサーだったりするのかな。

※ここからの作業は Volta でお送りします。
※Nodeのバージョン管理ツールVOLTA⚡

$ npm install -g pnpm

$ curl -L https://pnpm.js.org/pnpm.js | node - add --global pnpm

従来のようにnpmから入れる方法とnodeコマンドを使用して単独で導入する方法があるようです（後者の方法はやったことない）

$ volta install pnpm

voltaを使用している場合、voltaでインストールすることも可能です（この方法はpnpmのマニュアルに記載はありません）

最後にこのコマンド

$ pnpm add -g pnpm

最後のコマンドですが、どうやらこれがないとglobalなコマンドが動かないようです。
環境要因なのかは分からないです。

このコマンドを行わず、AngularのコマンドngなどをインストールしてもPathが通らず使用できませんでした。

いろいろ試して、初心に返ってドキュメント通りにインストールを行ったところ、最後のコマンドでglobalなコマンドが使えるようになりました。

最後に、npmを間違って使用しないよう、package.jsonのscriptsにコマンドを追加しておきます。

{
  "scripts": {
    "preinstall": "npx only-allow pnpm"
  }
}

ドキュメントに書かれていることはちゃんとやろう。

$ ng config cli.packageManager pnpm -g

通常Angular-cliはnpmを使用して動作するようになっています。それをpnpmで動作させるように設定するためのコマンド。
グローバルで使いたくない場合 -g を省略可能です。その場合、実行するフォルダー配下にAngular CLIがインストールされていないとエラーが出ます。

WebStormでは新規プロジェクトを作成する際、Angular CLIで新規プロジェクトの作成ができます。

ただ、この時プロジェクト画面ではngが自動検出されません（環境依存かもしれません）

その場合、どこを設定するのか？（node14.15.5の場合）

%LOCALAPPDATA%\Volta\tools\image\node\14.15.4\pnpm-global\4\node_modules\@angular\cli\

もしかしたらpnpm-global\の番号は違うかも。何の番号が分からないです。

このファイルパスはこのあと bin\ng と続きます。WebStormは bin\ng を自動かつ強制で付与するので、このパスを設定することになります。

※冒頭でも記載しましたがこの環境はVoltaを使用しています

~\AppData\Local\Volta\tools\image\packages\pnpm\node_modules\pnpm

設定する箇所は File | Settings | Languages & Frameworks | Node.js and NPM の画面。

このパスはwhere や volta whichコマンドでは出てこないです。

$ volta which pnpm

でpnpmのファイルパスが出てきます。このファイルを確認すると bin\pnpm.js ファイルへのパスが記載されていました。そのパスを参考に上記の設定するパスを導き出しています。

上記でも述べているようにWebStormは自動かつ強制的にファイルパスを付与することがあります。pnpmの場合 bin\pnpm.js を付与したパスを検索します。

やや長くなりましたが以上。