Bitbucket PipelinesでYarn v4 (PnPモード)を動かす設定

Yarn v4のPnP(Plug’n’Play)モードは、node_modulesを使わない新しいパッケージ管理方式だ。

Bitbucket PipelinesでYarn v4プロジェクトをビルドする際の設定方法をまとめる。

プロジェクト準備

Yarn v4でプロジェクトを作成する。

yarn create vite yarn-v4-app --template vanilla-ts

ディレクトリを移動しておく。

cd ./yarn-v4-app && pwd

Bitbucket Pipelinesの設定

bitbucket-pipelines.ymlを作成する。

image: node:22.6.0
definitions:
  caches:
    yarn:
      key:
        files:
          - yarn.lock
          - .pnp.cjs
          - .pnp.loader.mjs
      path: ~/.yarn/berry/cache

  scripts:
    - &Init export TZ=Asia/Tokyo && corepack enable
    - &Install yarn install --frozen-lockfile

pipelines:
  custom:
    build-vite:
      - step:
          name: "Build"
          caches:
            - yarn
          script:
            - *Init
            - *Install
            - yarn build

ポイント

corepackの有効化: corepack enableでYarn v4を使えるようにする
キャッシュ設定: yarn.lock、.pnp.cjs、.pnp.loader.mjsをキーにしてキャッシュを管理
frozen-lockfile: yarn install --frozen-lockfileでロックファイルの変更を防ぐ

まとめ

Bitbucket PipelinesでYarn v4のPnPモードを動かすには、corepackの有効化と適切なキャッシュ設定が必要だ。

PnP用のファイル(.pnp.cjs、.pnp.loader.mjs)もキャッシュキーに含めることで、効率的なビルドが実現できる。