既存のプロジェクトを monorepo プロジェクトに移行する手順

現在開発中のプロジェクトを monorepo として扱えるようにするための手順

npm workspace を使用します。

1. 新しいプロジェクトを作成

mkdir sample
cd sample
npm init

2. package.json を編集

pakcage.json

{
  ...,
  "private": true // 追加
}

3. workspace を追加

npm init -w packages/pack1

このコマンドを実行することで、プロジェクト直下にpackages/pack1ディレクトリが作成されます。

$ tree
sample
|- packages
 |- pack1
  |- packages.json

また、ルートのpackage.jsonが以下のように変更されます。

package.json

{
  ...,
  "workspaces": [
    "packages\\pack1"
  ]
  ...
}

4. 開発用の依存パッケージを、全ての workspace から使用できるように変更

eslintやprettierなどのリンターやフォーマッター、あるいはtypescriptやbabelといったトランスパイラなど、各 workspace で共通して使用する可能性のあるパッケージは、ルートプロジェクトにインストールします。

インストール方法は、通常の手順と同じです。

npm i -D <package name>

逆に、各 workspace に個別でインストールする場合は、以下のようにします。

npm i -w packages/pack1 -D <package name>

以下は、共通して使用する可能性のあるパッケージの一例です。

• typescript
  • ts-node
  • @types/node
• jest
  • ts-jest
  • @types/jest
  • @jest/types
• prettier
• eslint
  • eslint-config-prettier
  • @typescript-eslint/eslint-plugin
  • @typescript-eslint/parser
• rimraf
• npm-run-all
• simple-git-hooks

5. 既存プロジェクトのデータを、作成した workspace に移動

node_modules を除く、全てのファイル・ディレクトリをコピーします。この時、ルートプロジェクトにインストールしたパッケージと重複するものがある場合、package.jsonから削除しておきます。

6. workspace ごとに、必要なパッケージをインストール

npm i -w packages/pack1

workspace 間で、相互に参照

ルートプロジェクトでnpm installを実行すると、node_modules配下に各 workspace のシンボリックリンクが作成され、workspace 間で相互に参照できるようになります。

npm install