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

JavaScript/TypeScript

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

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

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

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

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

https://yarnpkg.com/features/caching#zero-installs

.yarnrc.yml
nodeLinker: "pnp"
cacheFolder: "./.yarn/cache"
enableGlobalCache: false
.gitignore
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

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

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

https://yarnpkg.com/getting-started/editor-sdks

Bash
yarn dlx @yarnpkg/sdks vscode

コメント(0件)

コメントを投稿

コメントは承認後に公開されます。メールアドレスは公開されません。

関連記事