blog.yuzu441.com

npm workspace導入

tags: javascript

yarn, pnpmのworkspaceは利用した事があるがnpmでは利用したことがなく、仕事で利用する必要が出てきたのでやったことをまとめる

npm docs workspaces

workspaceの設定

rootのpackage.jsonにprivate:trueを設定して、workspacesプロパティにworkspaceとして利用するディレクトリを指定する。

docではpackages/aのように明示的に書いているがpackages/*のようにglob指定も可能

コマンド

初期化

npm init -w ./packages/a

パッケージ追加

# aにaddrevを追加
npm i addrev -w a

# workspaceのbを依存としてaに取り込む
npm i b@workspace:* -w a

scripts実行

npm run test --workspace=a
# → cd packages/a && npm run test

# 複数ワークスペースで実行
npm run test --workspace=a --workspace=b

# 全体にもできる
npm run test --workspace=packages
npm run test --workspaces

# コマンドがある場合のみ実行
npm run test --workspaces --if-present

実際の移行でやったこと

プロジェクトルートでnpm initされたリポジトリをworkspace化するためにやったことは以下

  1. workspaceの設定をpackage.jsonに追加
  2. package/xxxを作成
  3. 現在のコードをpackage/xxxへ移動
  4. ルートのpackage.jsonをpackage/xxxにコピーし、不要な設定をそれぞれから消す
    • packageのpackage.jsonからworkspaceの設定を削除する等
  5. tsc, biomeのmonorepo対応

これでnpm iするとルートにnode_modulesが生成されて、まとめられる

tool類

tsconfig.jsonの設定

tsconfigはextends機能があるので、rootに基本設定、各packageに個別のtsconfigを置いてextendsするようにする

tsconfig.json

{
  "compilerOptions": { ... }
}

./packages/xxx/tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": { ... }
}

biomeの設定

現在の最新はv2だが、v1を利用しているのでv1の話。 package/xxx 内に biome.json を作成しルートの設定を継承するように設定

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "extends": ["../../biome.jsonc"]
}

ここにパッケージ独自の設定を追加するとルートの設定をオーバーライドできる。

ちなみに v2のドキュメント を見ると、v2はmonorepoをサポートしているようでルートに biome.json を置いて、各パッケージで biome.json に extends:"//" を設定するとルートの設定継承してくれるらしい。 継承したくない場合は extends:"//" を省略し root:false を指定しながら設定を書けば良いらしい