📂

npm workspacesでモノレポ開発を行う

2023/02/11に公開

はじめに

こんにちは、JavaScript/TypeScript を勉強中の駆け出しエンジニアです。
TypeScript の学習中に、フロントエンドとバックエンドを両方 TypeScript で開発してみたいと思い調べてみると npm に workspaces という機能があることを知りました。
この記事では、npm workspaces とは何かという部分と、その使い方を簡単にまとめます。

npm workspaces とは

公式ドキュメント
https://docs.npmjs.com/cli/v7/using-npm/workspaces

npm workspaces は一言で言うと、複数のパッケージを一つのルートパッケージで管理する機能です。

.
├── package.json
└── packages
    ├── a
    │   └── package.json
    └── b
        └── package.json

上記のようなリポジトリのルートディレクトリで npm install すると一括して node modules をインストールすることができます。

従来はモノレポの開発にはlernaが使われていたようです。
(ここはしっかり調べられていないです。)
ちなみに yarn にも同じ workspaces の機能があります。

いつ使う?

はじめに、で記載したように一つのリポジトリで、複数の JavaScript のプロジェクトを管理する場合に使用します。
単一のリポジトリで複数パッケージを管理することで、依存関係の管理をまとめて行うことができるメリットがあります。
(ここも正直しっかりと理解できていない。モノレポに関してはいずれしっかりと調べたい。)

使い方

※npm は v7 以上

プロジェクトの初期化

npm init

package.json の private を true にしておく。

ワークスペースの追加

npm init -workspace <ワークスペースのディレクトリ名>

-workspace は -w でも OK

npm init -w <ワークスペースのディレクトリ名>

複数のワークスペースを一度に追加することも可能

npm init -w <ワークスペース1> -w <ワークスペース2>

ワークスペースを作るとルートディレクトリの package.json に workspaces が追加される。

  {
    "name": "nodetest",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
-   "license": "ISC"
+   "license": "ISC",
+   "workspaces": [
+     "ワークスペース1",
+     "ワークスペース2"
+   ]
  }

ワークスペースにパッケージをインストールする

npm install <パッケージ> -w <ワークスペース名>

ワークスペースの scripts を実行する

npm run dev -w <ワークスペース名>

まとめ

以上が npm workspaces の基本的な操作方法になります。
実際にモノレポでの開発を行い、より理解を深めていきたいと思います。

Discussion