Zenn
Open11

monorepoについてのメモ

Node.js
TypeScript
monorepo
ryosuke-horieryosuke-horie

https://zenn.dev/uttk/articles/create-pnpm-monorepo

紹介されているディレクトリ構成

.
├── packages/
│   ├── lib-a/
│   |   ├── src/
│   |   |   └──index.ts
│   │   └── package.json
│   └── lib-b/
│       ├── src/
│       |   └──index.ts
│       └── package.json
├── package.json
├── pnpm-workspace.yaml
└── turbo.json
ryosuke-horieryosuke-horie

npmを利用しないように制限するTipsも...!

  "engines": {
+   "npm": "use pnpm please!",
+   "yarn": "use pnpm please!",
    "pnpm": ">=7.19.0"
  }
ryosuke-horieryosuke-horie

workspaceを設定した後にルートで

pnpm --filter lib-a build

のようにWorkspaceを指定してコマンドを実行することも可能

ryosuke-horieryosuke-horie

Turborepo とは？

Monorepo内のタスクを依存関係を考慮して実行してくれるツール
例えばworkspacesないのbuildコマンドを一括で実行する例が記載されている。

ryosuke-horieryosuke-horie

Turborepo 参考
https://zenn.dev/hayato94087/articles/d2956e662202a7

ryosuke-horieryosuke-horie
  • 統合テストが行いやすい他、ワークフローの単純化のメリットが紹介される。
  • Vercelが開発
  • 提供される機能
    • lint, build, testなどのタスクの並列実行
    • ローカルキャッシュを利用してビルド時間を短縮可能
  • 準備
    • turboコマンドを利用できるようにする
    • プロジェクトの作成時にturborepoプロジェクトを作成する
ryosuke-horieryosuke-horie

紹介されているディレクトリ構成

.
├── apps
│   ├── docs
│   │   ├── pages
│   │   │   └── index.tsx
│   │   ├── .eslintrc.js
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── next-env.d.ts
│   │   ├── next.config.js
│   │   ├── package.json
│   │   └── tsconfig.json
│   └── web
│       ├── pages
│       │   └── index.tsx
│       ├── .eslintrc.js
│       ├── .gitignore
│       ├── README.md
│       ├── next-env.d.ts
│       ├── next.config.js
│       ├── package.json
│       └── tsconfig.json
├── packages
│   ├── eslint-config-custom
│   │   ├── index.js
│   │   └── package.json
│   ├── tsconfig
│   │   ├── base.json
│   │   ├── nextjs.json
│   │   ├── package.json
│   │   └── react-library.json
│   └── ui
│       ├── Button.tsx
│       ├── index.tsx
│       ├── package.json
│       └── tsconfig.json
├── .eslintrc.js
├── .gitignore
├── .npmrc
├── README.md
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── turbo.json

packagesはプロジェクト共有で利用するプログラムや設定が置かれている。（ESLintなど）