Zenn
🤡

npm workspaceの使い方

2022/05/13に公開
JavaScript
TypeScript
npm
モノリポ
tech

導入

モノリポ管理をするにあたって、npm workspacesが非常に使い勝手が良かったので、使い方をメモ
lernaによるモノリポ管理を考えていたが、エディタでの補完などの設定がどうにもうまくいかなかったため、上記のnpm workspacesの導入に至ったという経緯がある

npm workspaceのメリット

npm workspaceを使うことで管理下の依存関係をルートでのnpm installで一括でインストールできたり、それぞれのパッケージでテストを走らせたり、ビルドできたりする。

前提

npm: v7以上

導入方法

ルートディレクトリのpackage.jsonにprivate: trueを設定

新規パッケージを管理下に入れたい場合は下記コマンドを叩く

$ npm init -w packages/a

このコマンドによりnpm workspaceの管理下にパッケージが追加される

root
  - package
    - a
  - package.json
こんな感じになる

既存のプロジェクトにnpm workspaceを導入する場合はpackage.jsonに下記を追加

"workspaces": [
    "packages/a",
  ],

導入方法はこれだけです！！

使い方

依存関係の追加

管理している各パッケージで共通のパッケージをインストールしたいときはルートディレクトリにて依存関係を追加してください。
管理しているパッケージで固有で使用するようなパッケージの依存関係の追加は下記コマンドでOKです！

npm install -w 管理しているパッケージ名 --save インストールしたいパッケージ名

こうすることでルートのpackage-lock.jsonで各パッケージの依存関係を管理することができます。

間違えて管理パッケージ下でnpm installしてしまい、package-lock.jsonができてしまった場合はファイル削除、node_modulesの削除後ルートにてnpm installすればOKです！

一括実行

管理しているパッケージでテストなどのコマンドを実行したいことがあると思います。
こんな時は--workspacesをコマンドのパラメータに設定してください。
そうすると管理下のパッケージで一括実行できます！

linter, formatter

例えばESLintなどのLinterやPrettierなどのツールを使う場合、管理パッケージで
全て共通のルールを使いたい or 共通ルールは切り出しておきたい
ということがあると思います。

このような場合は、ルートにてESLint, Prettierを依存関係に追加する。
それぞれのツールの設定ファイルをルートディレクトリに配置しておく。
これで共通ルールの設定は完了です！

パッケージごとに個別の設定をしたい場合は

  • ESLintの場合、パッケージ下にて設定ファイルを作成すれば、ルートの設定に上書きするような形でルールを設定できます。全く別のルールを設定したい場合はroot:trueをパッケージ下の設定ファイルに追加すればOK
  • Prettierの場合、パッケージ下にて設定ファイルを作成し、オプションに"overrides": []の設定を追加しておけば、ルートの設定をオーバーライドできます

注意点

依存関係の追加を行うとき管理しているパッケージ下にてnpm install --saveなどするとpackage-lock.jsonが管理パッケージ下に作成されてしまう。
こうなると下記のような問題が発生するので、ルートのpackage-lockだけで管理するようにしましょう。(環境によって挙動が少し違うかもしれません)

  • ルートディレクトリでのnpm installで一括インストールできない
  • ルートと管理パッケージ下のnode_modulesの競合によりエディタがエラーを吐く

何か問題点等あれば、コメントをお願いいたします！

Discussion