簡単にpnpmのWorkspace機能でmonorepo管理

こんにちは、荒木です。最近作ってみたいサービスがあるので、プロトタイプしていく過程を残して、完成するかはわからないですがシリーズ化していこうと思います。

初回の今回はフロントエンドのプロジェクトの開発環境づくりから始めていきます。作っていくものが不動産管理サービスで、エージェントとテナントが使用するサービスの2種類のフロントアプリケーションをとりあえず作っていくつもりです。

これまではlerna+yarnでmonorepo管理していたのですが、今回はpnpmを使ってみました。するととても簡単だったので、良いと思ったポイントを紹介したいと思います。

packageの指定がカンタン

pnpm-workspace.yamlにパッケージの設定を書いて、レポジトリのrootに置いておけば設定が完了します。yamlファイルなので書くことも内容も簡潔です。

packages:
  # packagesディレクトリ配下はすべてを登録
  - 'packages/**'
  # どこのtestディレクトリ内ものpackageには含めない
  - '!**/test/**'

.npmrcファイルを使うとworkspaceの設定を変更できます。たとえば、shared-workspace-shrinkwrapをoffにすると、それぞれのpackage内にpnpm-lock.yamlが作成されるように設定を変更できます。

shared-workspace-lockfile=false

filterが一貫性をもっていてカンタン

サードパッケージのインストールや、workspace内のパッケージの参照設定など開発中にはいろいろ行うことがありますが、対象のworkspaceのパッケージに移動してコマンドを叩いたりはしたくないです。

すべてリポジトリのrootでコマンドを実行できると楽だと思っていますが、pnpmは--filterフラグがどのコマンドでも同じように実行できるのでカンタンです。

以下のようなパッケージ構成になっているとします

+ packages
  + api (name: "@example/api")
+ apps
  + tenant (name: "@example/tenant)

appsディレクトリ内はテナントアプリケーションがあり、packagesディレクトリ内にはapiの共通ライブラリがあるとします。

リポジトリのrootからtenantアプリからapiライブラリの参照を指定したいなら

pnpm add @example/api --filter @example/tenant

サードパーティーのライブラリも同様に指定できますし、同じnpmスクリプトを実行したい場合は

pnpm run <script name> --filter <pattern>

で実行できます。これらを毎回指定したくない場合はrootのpackage.jsonに以下のように書いておくと、pnpm run dev:allのような感じで呼び出せます。

"scripts": {
  "dev:tenant": "pnpm run dev --filter @examle/tenant",
  "dev:agent": "pnpm run dev --filter @examle/agent",
  "dev:all": "pnpm run dev --filter ."
},

まとめ

pnpm自体がパッケージのインストールが速いことと、workspace管理自体もそれだけでカンタンに行えるので、今までのlerna+yarnで行っていたこととは大差がないですが非常に覚えやすくて良かったです。

新規プロジェクトで一度試してみるのもありじゃないでしょうか。