yarnからpnpmに移行してみる

はじめに

Hello Astroで厨二なのでnpmではなくyarnを使うという話をしましたが、 巷でpnpmが話題になってるので、素振りも兼ねてpnpmに移行してみました。

なぜpnpmを使うのか

雰囲気でyarnを使っていたので全く気付いてなかったのですが、yarnはv1, v2, v3がそれぞれ生きている状況らしく、 どうやらv2で独自路線に振りすぎたのをv3で揺り戻した？みたいになっているらしく、 そもそも私も今使っているyarnのバージョンが良く分からない。。 結局使っていたのはv1だったのですが、もうこの時点で面倒くさいことになっている。 詳細は 「yarn v3 の独自機能を避けつつ yarn v1 から v3 へのアップグレードをする - Zenn」などを参考。

pnpmは彗星の如く現れたよさげなパッケージマネージャなのですが、これも詳細は 「pnpm の特徴 - Zenn」などを見てもらうとして、 個人的に気に入ってるのは「厳格なパッケージ管理」のところです。

簡単に言うとAがBに依存してるとき、npmやyarnの場合node_module内でAとBが同じ階層に配置されるので、Bもまたinclude可能になるのですが、 AがBに依存しなくなったとき、Bをincludeしてたら死ぬよねということです。 Bをincludeしたかったらpackage.jsonに依存を書きなさいと。なるほど。良さそうですね。

インストール

pnpmのインストールは悩んだのですが、yayでインストールできたのでこれを使うことにしました。

yay -S pnpm

移行

以下の記事を参考にしつつ移行します。

• How to migrate from yarn / npm to pnpm - Dev.
• yarnからpnpmに移行した時の話 - Zenn

node_modules削除

とりあえず node_modules を削除します。

rm -rf node_modules

package.json編集

preinstall scriptsを追加します。

{
  "scripts": {
    "preinstall": "npx only-allow pnpm",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write .",
    "type-check": "tsc --noEmit"
},

pnpm import / install

pnpm import で yarn.lock から pnpm-lock.yaml を生成します。

pnpm import

yarn.lock を削除します。

rm -rf yarn.lock

pnpm install で pnpm-lock.yaml を元に node_modules にインストールします

pnpm install

ローカルサーバー起動

インストールできたので、 pnpm run dev でローカルサーバーを起動してみます。

pnpm run dev

問題なく動きました。

ビルドコマンドの設定

「Add PNPM to Pre-installed Cloudflare Pages tools」 を参考に、ビルドコマンドを npm run build から npm install -g pnpm && pnpm install && pnpm run build に変更します。

さらに、デフォルトで npm install が実行されるので、 NPM_FLAGS を --version に設定しておくことで、無害なコマンドが実行されるように変更しておきます。

えいや

えいやでpushします。この記事が公開されてれば成功です。

まとめ

特に躓くこともなく移行できました。 pnpm install が爆速なのはやっぱり良いですね。 プロダクションで使うにはまだちょっとエッジ感がありますが、今のところは良さそうです。