YarnのPnPモードを使ってみる

サイトリニューアルするにあたり、YarnのPnPモードを使ってみることにした。

PnPモードとは、node_modulesに依存せずに.pnp.cjsに依存関係のパッケージ情報を出力して管理するタイプのものらしい。別途キャッシュディレクトリにzip化された依存パッケージをダウンロードされる。

キャッシュについては、グローバルキャッシュ（デフォルト）かワークスペースに.yarn/cacheを生成して管理する方法があるようだ。グローバルキャッシュにzipが保存されているので、別のワークスペースから同じパッケージを再利用する際もダウンロードする必要がないので速い。

もうひとつは、Zero Installsという機能でワークスペースにキャッシュを保存し、出力された.pnp.cjsもリポジトリに管理対象とすることで、yarn installせずにすぐに動かせる。

Zero Installsを使うときは下記のような設定にする。

nodeLinker: "pnp"
cacheFolder: "./.yarn/cache"
enableGlobalCache: false

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

こちらも使ってみようか気になったが、キャッシュサイズが350MBほどになってしまったのでやめておいた。でもCIなど利用する際にメリットがあるのかもしれない。

VSCodeで開発していてnode_modulesがないことでTypeScriptの型宣言が上手く参照できなかったりするので、下記コマンドで解決。

yarn dlx @yarnpkg/sdks vscode