毛糸ワークスペースでモノレポを囲い込む
最も人気のある意見ではないかもしれませんが、私はmonoreposが大好きです。 まったく新しいプロジェクトを開始するときは、単一のリポジトリを用意してそこから物事を成長させるのが理にかなっています。 残念ながら、プロジェクトが成長するにつれて、物事は扱いにくくなる可能性があります。 次に知っているのは、バックエンドコードとフロントエンドコードが依存関係を共有していて、package.json
が数百行に増えたことです。 恐れることはありません。yarnワークスペースは、野蛮なモノレポを飼いならすのに役立ちます。
yarn
ワークスペースがテーブルにもたらすものは、モノリポジトリをリンクし、依存関係を共有し、同じ依存関係の異なるバージョンを固定する簡単な方法です。 また、1つのyarn install
コマンドを使用して、すべてのサブプロジェクトの依存関係をすばやくインストールすることもできます。
複数のリポジトリを使用するマイクロサービスアプローチを使用している場合は、リポジトリを起動して接続し、同期を維持するためのスクリプトの作成と処理に既に精通しているはずです。
yarn workspaces
を使用すると、これをすぐに実行できるため、実際のコーディングなどに時間を集中できます。
入門
明らかに、yarn
ワークスペースを使用するには、yarn
がインストールされている必要があります。 そうでない場合は、糸取り付けページを参照して、特定のシステムの指示に従ってください。
npm
を使用している既存のリポジトリを使用している場合は、リポジトリでyarn
を実行するだけです。 これにより、yarn.lock
ファイルが生成され、yarn
を使用できるようになります。
新しいプロジェクトの場合は、プロジェクトディレクトリ内でyarn init
を実行し、プロンプトに従います。
デモンストレーション用に設定するために、GatorFarm
という新しいプロジェクトを作成しました。このプロジェクトには、次のようなフロントエンドコードとバックエンドコードのディレクトリがあります。
$ mkdir -p GatorFarm/{backend,frontend}
$ cd GatorFarm
$ yarn init # Proceed through the prompts
ワークスペースの作成
私にとって、モノレポの美しさは、すべてが1か所にあるという事実にあります。 クローンを作成するための1つのリポジトリで、必要なものがすべて揃っています。
前述のように、モノリポジトリ内の複数のサブプロジェクト間で共有されている依存関係を含むpackage.json
がある場合、これは非常に厄介です。
これは、あるサブプロジェクトで特定のバージョンのパッケージを使用する必要があるが、別の場所で別のバージョンを使用したい、または使用する必要がある瞬間に、さらに厄介になります。
この種の問題を回避するために、個々のサブプロジェクトを、独自の依存関係を持つ独自のプロジェクトとして扱うことができます。 そのためには、前に作成した各サブディレクトリ内でyarn init
を実行する必要があります。
$ cd backend
$ yarn init # Proceed through the prompts
$ cd ../frontend
$ yarn init # And of course these prompts
$ cd ..
yarn init
でデフォルト値を受け入れた場合、backend
ディレクトリに「backend」という名前のプロジェクトがあり、frontend
ディレクトリに「frontend」という名前のプロジェクトがあります。
package.json
内のname
フィールドは、yarn
がワークスペースを作成するために使用するものです。 実際にワークスペースを作成するには、GatorFarm
プロジェクトのルートにあるpackage.json
ファイルを編集する必要があります。
$ vim package.json # Developer's choice of editor, obviously, Vim not required ;)
そして、サブプロジェクト名の配列とともにworkspaces
属性を追加します。 次のようになります。
{
"name": "GatorFarm",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true,
"workspaces": [
"backend",
"frontend"
]
}
private
属性も存在し、true
に設定されている必要があることに注意してください。 ワークスペースを使用するプロジェクトは公開されることを意図していないため、yarn init
でこれを指定しなかった場合は、ここで公開できます。
依存関係のインストール
各サブプロジェクトディレクトリにpackage.json
があるため、各プロジェクトのサブディレクトリから依存関係を追加できます。 バックエンドコードとフロントエンドコードのサブプロジェクトがあるので、通常の容疑者の一部をバックエンドプロジェクトに追加しましょう。
$ cd backend
$ yarn add express uuid
$ cd ..
frontend
ディレクトリでも同じことができます。 依存関係を異なるバージョン番号に固定することもできます。たとえば、backend
に含まれているのと同じuuid
パッケージをfrontend
の以前のバージョンに固定します。
$ cd frontend
$ yarn add react uuid@^2
$ cd ..
ワークスペースのルートに依存関係を追加しようとすると、yarn
からの反対に遭遇します。 私は判断するためにここにいるわけではないので、ワークスペース/プロジェクトのルートに依存関係を本当に追加したい場合は、-W/--ignore-workspace-root-check
引数を使用して追加できます。
$ yarn add lint-staged -W
サブプロジェクトのリンク
サブプロジェクトへの依存関係の追加について説明しましたが、コードを再利用できるようにサブプロジェクトをリンクするのはどうでしょうか。
サブプロジェクトをリンクするには、他の依存関係と同じように、プロジェクトの名前とバージョンを追加するだけです。
$ cd backend
$ yarn add [email protected]
バージョン番号を省略すると、ローカルサブプロジェクトの代わりにNPMからの外部依存関係が含まれるリスクがあることに注意してください。
frontend
やbackend
のような一般的な名前は、npmパッケージとのこの重複を悪化させる可能性があるため、一般的でない命名規則を考え出すことは価値があるかもしれません:P
再出発
これで、yarn
ワークスペースとして構成された2つのサブプロジェクトを持つプロジェクトができました。 物事を立ち上げて実行するための各ステップをウォークスルーしたため、1つのコマンドですべてのプロジェクトとサブプロジェクトの依存関係をインストールする、ワークスペースの最高の部分の1つを体験することはできませんでした。
変更をコミットしてプッシュし、必要に応じてリポジトリの新しいコピーを複製することを歓迎します。または、プロジェクトのルートと各サブプロジェクトからnode_modules
ディレクトリをクリアすることもできます。 。
プロジェクトのクリーンコピーを取得したら、プロジェクトのルートからyarn install
を実行し、1つのコマンドで、複数のサブプロジェクトにまたがってインストールされているすべての依存関係の栄光を満喫してください。 💪