Zenn
Open4

npmからpnpm移行の際にやった11のこと

npm
pnpm
kenmorikenmori

npmからpnpm移行の際に参考にした記事

kenmorikenmori

ログ

  1. brew install corepack // 好み。pnpmが自動的にインストール
  2. corepack prepare pnpm@8.7.4 --activate // 時点ver最新にする
  3. delete node_modules
  4. add script in package.json `"preinstall": "npx only-allow pnpm", // 他の開発者が誤ってpnpm以外の方法で依存関係をインストールするのを防ぐ
  5. pnpm-workspace.yamlを作成
  6. pnpm import // package.lock.jsonを参照してimport
  7. remove pacakge.lock.json
  8. pnpm i // install dependences
  9. pnpm dev // 確認
  10. add "packageManager": "pnpm@8.2.0" in package.json // 指定
  • npm runの箇所はpnpmに置き換わる
  1. エイリアスを.zshrcに指定した
    alias pn=pnpm

pnpm add -wD @playwright/test

kenmorikenmori

file changes

Playwright with pnpm at GitHubActions

.github/workflows/playwright.yaml

Playwrightの例がなくて困っていた。書き方はいろいろです

name: Playwright Tests
on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main, develop]
env:
// 省略
jobs:
  test:
    timeout-minutes: 240
    runs-on: ubuntu-latest
    environment: Preview
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - uses: pnpm/action-setup@v2
        name: Install pnpm
        id: pnpm-install
        with:
          version: 8.7.4
          run_install: false
      - name: Get pnpm store directory
        id: pnpm-cache
        shell: bash
        run: |
          echo "text<<EOF"$'\n'"$message"$'\n'EOF >> $GITHUB_OUTPUT
      - uses: actions/cache@v3
        name: Setup pnpm cache
        with:
          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-
      - name: Install dependencies
        run: pnpm install
      - name: Install Playwright Browsers
        run: pnpm exec playwright install --with-deps
      - name: Run Playwright tests
        run: pnpm test:e2e
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

.npmrcを追加

use-node-version=18.16.1

`package-lock.jsonを削除

package.json

大体。冗長な書き方ですが

from

    "lint": "npx eslint src .",
    "lint:fix": "npm run lint -- --fix",
    "prettier": "npx prettier src . --check",
    "prettier:fix": "npm run prettier -- --write",
    "format": "npm run prettier:fix && npm run lint:fix",
    "all": "npm run format && npm run type-check && npm run test:e2e",
    "test": "npm run lint && npm run prettier && npm run type-check && npm run test:e2e",
    "test:e2e": "npx playwright test",

to

    "preinstall": "pnpm dlx only-allow pnpm",
    "lint": "pnpm dlx eslint src .",
    "lint:fix": "pnpm run lint --fix",
    "prettier": "pnpm dlx prettier src . --check",
    "prettier:fix": "pnpm exec prettier . --write",
    "format": "pnpm prettier:fix && pnpm lint:fix",
    "all": "pnpm format && pnpm type-check && pnpm test:e2e",
    "test": "pnpm lint && pnpm prettier && pnpm type-check && pnpm test:e2e",
    "test:e2e": "pnpm dlx playwright test",
  • npxなところは pnpm dlx に置き換え
  • npm runはpnpmに置き換え
  • 特にeslintを使っている箇所、コマンドがコマンドを呼んでいる箇所はちょっと注意

packageManagerフィールドの追加

package.json

{
  // 省略
  "packageManager": "pnpm@8.7.4"
}

を追加

生成されたpnpm-lock.yaml

省略

pnpm-workspace.yaml

packages:
  # include packages in sub folders (e.g. apps/ and packages/)
  - 'apps/**'
  - 'packages/**'
  # if required, exclude some directories
  - '!**/test/**'
kenmorikenmori

トラブルシューティング

  • pnpm Running this command will add the dependency to the workspace root

ライブラリ追加時に
pnpm Running this command will add the dependency to the workspace root
が出たら
pnpm add -wD <package>
type checkでこけるようになった場合もこれをする
Cannot find module '@firebase/util' or its corresponding type declarationsとか
でたが、依存の依存を参照していたっぽい

  • VSCodeでPlaywrightを使っている方

https://github.com/microsoft/playwright/issues/18931

  • Error: Unable to process file command 'output' successfully.

Invalid format '/home/runner/setup-pnpm/node_modules/.bin/store/v3'
CI上、yaml中のecho部分で出たエラー

run: |
        echo "text<<EOF"$'\n'"$message"$'\n'EOF >> $GITHUB_OUTPUT

に修正
ref

  • ERR_PNPM_NO_PKG_MANIFEST No package.json found

WIP

  • ERR_PNPM_LOCKFILE_CONFIG_MISMATCH Cannot proceed with the frozen installation. The current "settings.autoInstallPeers" configuration doesn't match the value found in the lockfile

lockファイルがpnpm v7で作られた可能性があり、v7では auto-install-peersはfalseがデフォルトだったが、 pnpm v8ではtrueになったため起きるという

2つの異なるバージョンのpnpmを使い続けたい場合は、一貫性を持たせるために、プロジェクトのルートに.npmrcを追加して、必要な値を指定してください
auto-install-peers=falseで生成されたロックファイルは、auto-install-peers=trueで生成されたものと異なる場合があります

pnpm-lock.yaml

change true -> false

settings:
  autoInstallPeers: false