Zenn
🔭

CLIツールでworkspaceが有効かを確認するために各パッケージマネージャーごとのworkspace仕様概説

2024/12/29に公開
Node.js
npm
tech

札幌のフロントエンドエンジニア**n13u**です。

皆さんはJavaScriptランタイム・Node.jsでのパッケージマネージャーは何を使われていますか？
npm,yarn,pnpm,deno,bun etc...

それぞれにモノレポ管理用のworkspaces機能がありますが、それぞれ設定が若干異なり挙動が異なるためパッケージマネージャーを複数併用していると時々わからなくなります.

特にNode.js環境向けCLIツール開発では、パッケージマネージャーに依存環境をインストールさせる際など同じワークスペース認識方法を使わないと正しく機能しません.

今回の記事では各パッケージマネージャーの以下の機能・特性をそれぞれまとめてみます.

  1. workspaceの認識方法
  2. scriptの動かし方
  3. 依存環境の追加方法

workspaceに対応しているパッケージマネージャー抜粋

今回workspaceに対応しているパッケージマネージャーのうち、以下のパッケージマネージャーを対象にします.

  • npm
  • yarn(classic)
  • yarn(berry)
  • pnpm
  • bun

npm

一番標準的なパッケージマネージャーです.

workspace認識方法

Workspaces are usually defined via the workspaces property of the package.json file

npmのworkspace認識方法は基本的でpackage.jsonのworkspacesにフォルダを指定することでworkspace機能有効化できます.

package.json
{
  "name": "my-workspaces-powered-project",
  "workspaces": ["packages/a"]
}

scriptの動かし方

scriptやコマンドを実行するときは--workspaceオプションを利用します.
--workspace=aをつけてnpm run <command>することで可能になります.
全てのworkspaceのコマンドを一括して実行したい場合は--workspacesをオプションにつけるだけで良いです.

依存環境の追加方法

npm install <dependency-name>にオプション-w <workspace name>で特定のワークスペースにインストールするか、ルートならルート、パッケージのフォルダでinstallすることで実現可能です.

workspace関連公式ドキュメント

yarn(classic)

yarnの主にv1の話になります.

同様にworkspacesをpackage.jsonファイルに追加することでworkspaceが認識することができます.

workspace認識方法

package.json
{
    "private": true,
    "workspaces": [
        "workspace-a",
        "workspace-b"
    ]
}

scriptの動かし方 / 依存環境の追加方法

yarn(classic)はnpmとは異なり、全てのコマンドをworkspaceサブコマンドを利用して実行します. 以下のようにworkspace_nameを指定しコマンドを実行することでパッケージの追加などが行えます. もしくはパッケージフォルダに移動して実行でも可能です.

yarn workspace <workspace_name> <command>

各workspaceに対して一括してスクリプトを実行したい場合は以下のコマンドが利用可能です

yarn workspaces run <command>

workspace関連公式ドキュメント

yarn(berry)

yarnはv2以降に大きく変更が入っています.
ここではv2以降の仕様で動くyarnをyarn(berry)と呼びます.

workspace認識方法

yarn(berry)でも基本的なworkspace認識方法は変わりません.

package.json
{
  "workspaces": [
    "packages/*"
  ]
}

scriptの動かし方 / 依存環境の追加方法

yarn(berry)でも基本的にはパッケージ追加とコマンドの実行はサブコマンドworkspaceを利用可能です.もしくはパッケージフォルダに移動して実行でも可能です.

yarn workspace <workspaceName> <commandName> ...

ただし一括して行う場合のコマンドは同じくworkspacesですがrunではなくforeachを加える必要があります.

yarn workspaces foreach <commandName> ...

ただし特定のワークスペースにだけ依存環境を追加したい場合は、以下のyarn workspaces focusが利用可能です. そしてこのコマンドは-A / --allオプションと組み合わせてclassicまでのyarn install --productionを代替します.

yarn workspaces focus ...

workspace関連公式ドキュメント

pnpm

pnpmはnpm, yarnに続く新たなパッケージマネージャーです.

workspace認識方法

pnpmは他のパッケージマネージャーと大きく異なり、pnpm-workspace.yamlという設定ファイルにworkspaceフォルダを記述することでworkspaceを認識します.

pnpm-workspace.yaml
packages:
  - 'my-app'
  - 'packages/*'
  - 'components/**'
  - '!**/test/**'

scriptの動かし方 / 依存環境の追加方法

pnpmでは--filterオプションを指定することで依存環境の追加やスクリプトの実行をワークスペースごとに行えます.

pnpm add --filter=<workspace_name>

もしくはパッケージフォルダに移動して実行でも可能です.
ただしパッケージルートに依存環境を追加する際は--ignore-workspace-root-check / -wオプションを明示的に付与する必要があります.

pnpm add -w -D typescript

workspace関連公式ドキュメント

bun

bunは実行環境でもあり、パッケージマネジャーの役割もはたします.

workspace認識方法

こちらはnpm等と同じようにpackage.jsonのworkspacesに記述することで、workspaceとして認識します.

package.json
{
  "workspaces": ["packages/*"],
  "devDependencies": {
    "example-package-in-monorepo": "workspace:*"
  }
}

scriptの動かし方 / 依存環境の追加方法

こちらも同様に--filterオプションを利用してスクリプトの実行や依存環境の追加を制限できます.もしくはパッケージフォルダに移動して実行でも可能です.

bun add --filter=<workspace_name>

workspace関連公式ドキュメント

終わりに

各パッケージマネージャーごとの特性と機能を理解することで少しでもworkspaceへの理解が深まればと思います.

Discussion