Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

pnpm workspace実践ノウハウ

pnpm workspace実践ノウハウ

~ 秋のエンジニア大交流会 & LT会!!~( https://devguil.connpass.com/event/290596/ )で発表したセッションのスライドです。
サンプルリポジトリ: https://github.com/MH4GF/pnpm-workspace-knowhow-sample

Hirotaka Miyagi

September 09, 2023
Tweet

More Decks by Hirotaka Miyagi

Other Decks in Programming

Transcript

  1. pnpm workspace は便利ですが、実際に運用を進める上でいくつか注意 点がありました 悩んだ点と解決方法を紹介していきます 汎用ライブラリ or アプリケーション / パブリック

    or プライベート で観 点は異なるはずですが、今回はプライベートなアプリケーションでの利 用をメインに紹介します workspace機能はnpm / yarnでも提供されており、それらでも適用でき る内容が多いです 3
  2. 以下の構造のアプリケーションがあるとして . ├── apps/ │ ├── docs/ │ │ └──

    package.json │ └── web/ │ └── package.json ├── packages/ │ └── ui/ │ └── package.json └── pnpm-workspace.yaml pnpm workspace の利用方法 5
  3. サブパッケージをimportできる # ./apps/web/package.json { "name": "web", "dependencies": { "next": "^13.4.19",

    "react": "^18.2.0", "react-dom": "^18.2.0", "ui": "workspace:*" # <- ui パッケージをインターナルパッケージとして参照できる } } 公式ドキュメント: https://pnpm.io/ja/workspaces pnpm workspace の利用方法 7
  4. . ├── apps/ │ ├── docs/ │ └── web/ ├──

    packages/ │ ├── ui/ │ ├── eslint-config-custom/ │ └── tsconfig/ ├── pnpm-workspace.yaml └── turbo.json ref: https://turbo.build/repo/docs/getting-started/create-new 最初はcreate-turboを試すのがオススメ 10
  5. 以下はtypescriptの5.1.5と5.1.6が混在していた場合の例 $ pnpm exec syncpack list-mismatches ✘ typescript ^5.1.6 is

    the highest valid semver version in use ^5.1.5 in devDependencies of packages/ui/package.json Command failed with exit code 1. 依存パッケージのバージョン管理 13
  6. pnpm workspaceでインターナルパッケージを依存に追加する場合は "sub-package": "workspace:*" や "sub-package": "*" が使える workspace:* のような指定をworkspaceプロトコルと呼ぶ

    インターナルパッケージを依存に追加する場合はworkspaceプロトコル を使うのが良い workspace内に同名のパッケージが存在しない場合エラーになってくれ る npmにpublishされているパッケージと同名のパッケージと競合してイン ストールに失敗することがあった workspaceプロトコル 14
  7. prettierとtsconfig.jsonの共通設定をまとめている例 ./packages/configs ├── package.json ├── prettier │ └── index.cjs └──

    tsconfig ├── base.json ├── nextjs.json └── react-library.json configsパッケージのパターン 19
  8. パッケージ作成のために必要なコードを生成するジェネレータを用意し ておくと便利 前述したESLint, Prettier, Jestのセットアップや、tsconfig.jsonの設定な ど いくつかコード生成ツールはあるが、Turborepoの turbo gen を利用

    するのが良さそうだった TypeScriptで対話式入力の設定を記述できる・新規ファイル生成だけで なく既存ファイルへの加筆もできる パッケージ作成のテンプレート化 22