最も人気のある意見ではないかもしれませんが、私は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からの外部依存関係が含まれるリスクがあることに注意してください。

frontendbackendのような一般的な名前は、npmパッケージとのこの重複を悪化させる可能性があるため、一般的でない命名規則を考え出すことは価値があるかもしれません:P

再出発

これで、yarnワークスペースとして構成された2つのサブプロジェクトを持つプロジェクトができました。 物事を立ち上げて実行するための各ステップをウォークスルーしたため、1つのコマンドですべてのプロジェクトとサブプロジェクトの依存関係をインストールする、ワークスペースの最高の部分の1つを体験することはできませんでした。

変更をコミットしてプッシュし、必要に応じてリポジトリの新しいコピーを複製することを歓迎します。または、プロジェクトのルートと各サブプロジェクトからnode_modulesディレクトリをクリアすることもできます。 。

プロジェクトのクリーンコピーを取得したら、プロジェクトのルートからyarn installを実行し、1つのコマンドで、複数のサブプロジェクトにまたがってインストールされているすべての依存関係の栄光を満喫してください。 💪