糸のワークスペース：プロジェクトのコードベースをプロのように整理する

新しいプロジェクトに取り掛かるときはいつでも、「バックエンドサーバーとフロントエンドクライアントに別々のgitリポジトリを使用する必要がありますか？ コードベースを整理するための最良の方法は何ですか？」

私の個人的なウェブサイトで数ヶ月働いた後、私はこれと同じ質問をしました。 私はもともとすべてのコードを同じリポジトリに持っていました。バックエンドはNode.jsを使用し、フロントエンドはPugでES6を使用していました。 両方のプロジェクトを同じリポジトリに含めることで、関数とクラスの検索が容易になり、リファクタリングが容易になったため、この組織を便利に採用しました。 しかし、私はいくつかの欠点を見つけました：

• 独立した展開はありません。
  両方のアプリが同じpackage.jsonを使用しており、両方のプロジェクトで明確な分離はありませんでした。
• 不明確な境界。
  私はグローバルなpackage.jsonに依存しているため、バックエンドとフロントエンドに特定のバージョンを設定するメカニズムがありませんでした。
• バージョン管理なしの共有ユーティリティとコード。

調査の結果、Yarnワークスペースはこれらの短所を解決するための優れたツールであり、monorepoプロジェクトを作成するための便利なツールであることがわかりました（後で詳しく説明します）。

この記事では、Yarnワークスペースの概要を説明します。 それを使用して最初のプロジェクトを作成する方法について一緒にチュートリアルを実行し、要約と次のステップで終了します。

糸のワークスペースとは何ですか？

YarnはFacebookの人々によるパッケージマネージャーであり、Yarnワークスペースと呼ばれる優れた機能を備えています。 Yarnワークスペースでは、モノリシックリポジトリ（monorepo）を使用してプロジェクトコードベースを整理できます。 アイデアは、単一のリポジトリに複数のパッケージが含まれるということです。 パッケージは分離されており、より大きなプロジェクトから独立して生きることができます。

別の方法として、これらすべてのパッケージを別々のリポジトリに配置することもできます。 残念ながら、このアプローチは、パッケージとそれに依存するプロジェクトで開発する際の共有可能性、効率、および開発者のエクスペリエンスに影響を与えます。 さらに、単一のリポジトリで作業する場合、開発ライフサイクル全体のプロセスを改善するために、より迅速に移動し、より具体的なツールを構築できます。

Monorepoプロジェクトは、GoogleやFacebookなどの大企業に広く受け入れられており、monorepoが拡張できることが証明されています。

「「

Reactは、monorepoであるオープンソースプロジェクトの良い例です。 また、Reactはその目的を達成するためにYarnワークスペースを使用します。 次のセクションでは、Yarnを使用して最初のmonorepoプロジェクトを作成する方法を学習します。

6つのステップでYarnワークスペースを使用してReactとExpressでMonorepoプロジェクトを作成する

これまで、Yarnとは何か、monorepoとは何か、そしてYarnがmonorepoを作成するための優れたツールである理由を学びました。 それでは、Yarnワークスペースを使用して新しいプロジェクトを設定する方法を最初から学びましょう。 フォローするには、最新のnpmがインストールされた作業環境が必要です。 ソースコードをダウンロードします。

前提条件

このチュートリアルを完全に完了するには、マシンにYarnをインストールする必要があります。 以前にYarnをインストールしたことがない場合は、次の手順に従ってください。

このチュートリアルで従う手順は次のとおりです。

1. プロジェクトとルートワークスペースを作成する
2. Reactプロジェクトを作成し、ワークスペースリストに追加します
3. Expressプロジェクトを作成し、ワークスペースに追加します
4. すべての依存関係をインストールし、yarn.lockにこんにちはと言ってください
5. ワイルドカード（*）を使用してすべてのパッケージをインポートする
6. 両方のパッケージを実行するスクリプトを追加する

1.プロジェクトとルートワークスペースを作成します

ローカルマシンターミナルで、 example-monorepoという名前の新しいフォルダを作成します。

 $ mkdir example-monorepo

フォルダ内に、ルートワークスペースを使用して新しいpackage.jsonを作成します。

 $ cd example-monorepo $ touch package.json

ルートワークスペースを誤って公開しないように、このパッケージはプライベートにする必要があります。 次のコードを新しいpackage.jsonファイルに追加して、パッケージをプライベートにします。

 { "private": true, "name": "example-monorepo", "workspaces": [], "scripts": {} }

2. Reactプロジェクトを作成し、ワークスペースリストに追加します

このステップでは、新しいReactプロジェクトを作成し、ルートワークスペース内のパッケージのリストに追加します。

まず、チュートリアルで作成するさまざまなプロジェクトを追加するpackagesというフォルダーを作成しましょう。

 $ mkdir packages

Facebookには、新しいReactプロジェクトを作成するコマンドがあります： create-react-app 。 これを使用して、必要なすべての構成とスクリプトを含む新しいReactアプリを作成します。 手順1で作成したpackagesフォルダー内に、「client」という名前のこの新しいプロジェクトを作成しています。

 $ yarn create react-app packages/client

新しいReactプロジェクトを作成したら、そのプロジェクトをワークスペースとして扱うようにYarnに指示する必要があります。 これを行うには、ルートpackage.jsonの「workspaces」リスト内に「client」（以前に使用した名前）を追加するだけです。 create-react-appコマンドを実行するときに使用したのと同じ名前を使用してください。

 { "private": true, "name": "example-monorepo", "workspaces": ["client"], "scripts": {} }

3. Expressプロジェクトを作成し、ワークスペースに追加します

次に、バックエンドアプリを追加します。 express-generatorを使用して、必要なすべての構成とスクリプトを含むExpressスケルトンを作成します。

コンピューターにexpress-generatorがインストールされていることを確認してください。 次のコマンドでYarnを使用してインストールできます。

 $ yarn global add express-generator --prefix /usr/local

express-generatorを使用して、 packagesフォルダー内に「server」という名前の新しいExpressアプリを作成します。

 $ express --view=pug packages/server

最後に、新しいパッケージ「サーバー」をルートpackage.json内のワークスペースリストに追加します。

 { "private": true, "name": "example-monorepo", "workspaces": ["client", "server"], "scripts": {} }

注：このチュートリアルは、2つのパッケージ（サーバーとクライアント）のみで簡略化されています。 プロジェクトでは、通常、必要な数のパッケージがあり、慣例により、オープンソースコミュニティは次の命名パターンを使用します： @your-project-name/package-name 。 例：自分のWebサイトで@ferreiro/serverを使用しています。

4.すべての依存関係をインストールし、yarn.lockにこんにちはと言います

ReactアプリとExpressサーバーを追加したら、すべての依存関係をインストールする必要があります。 Yarnワークスペースはこのプロセスを簡素化し、すべてのアプリケーションに移動してそれらの依存関係を手動でインストールする必要がなくなりました。 代わりに、1つのコマンド（ yarn install ）を実行します。Yarnは、すべてのパッケージのすべての依存関係をインストールし、それらを最適化してキャッシュする魔法を実行します。

次のコマンドを実行します。

 $ yarn install

このコマンドは、 yarn.lockファイルを生成します（この例と同様）。 これには、プロジェクトのすべての依存関係と、各依存関係のバージョン番号が含まれています。 Yarnはこのファイルを自動的に生成するため、変更しないでください。

5.ワイルドカード（*）を使用してすべてのパッケージをインポートする

これまで、追加した新しいパッケージごとに、ルートpackage.jsonも更新して、新しいパッケージをworkspaces:[]リストに含めることを余儀なくされていました。

パッケージフォルダ内のすべてのパッケージを含めるようにYarnに指示するワイルドカード（*）を使用して、この手動の手順を回避できます。

ルートpackage.json内で、次の行でファイルの内容を更新します： "workspaces": ["packages/*"]

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": {} }

6.両方のパッケージを実行するスクリプトを追加します

最後のステップ！ ReactクライアントとExpressクライアントの両方のパッケージを同時に実行する方法が必要です。 この例では、をconcurrently使用します。 このパッケージでは、複数のコマンドを並行して実行できます。

ルートpackage.jsonにconcurrently追加します：

 $ yarn add -W concurrently

ルートワークスペースpackage.json内に3つの新しいスクリプトを追加します。 2つのスクリプトがReactクライアントとExpressクライアントを個別に初期化します。 もう1つは、両方のスクリプトをconcurrentlyして実行するために同時に使用します。 このコードを参照してください。

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": { "client": "yarn workspace client start", "server": "yarn workspace server start", "start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" } }

注： startスクリプトを「サーバー」および「クライアント」パッケージに書き込む必要はありません。これらのパッケージの生成に使用したツール（ create-react-appおよびexpress-generator ）は、これらのスクリプトを既に追加しているためです。 だから私たちは行ってもいいです！

最後に、Expressブートアップスクリプトを更新して、ポート4000でExpressサーバーを実行するようにしてください。そうしないと、クライアントとサーバーは同じポート（3000）を使用しようとします。

packages / server / bin / wwwに移動し、15行目のデフォルトポートを変更します。

 var port = normalizePort(process.env.PORT || '4000');

これで、パッケージを実行する準備が整いました。

 $ yarn start

ここからどこへ行くか

私たちがカバーしたことを要約しましょう。 最初に、Yarnワークスペースと、それがモノレポプロジェクトを作成するための優れたツールである理由について学びました。 次に、Yarnを使用して最初のJavaScriptモノレポプロジェクトを作成し、アプリのロジックをクライアントとサーバーの複数のパッケージに分割しました。 また、最初の基本的なnpmスクリプトを作成し、各アプリに必要な依存関係を追加しました。

この時点から、オープンソースプロジェクトを詳細に確認して、Yarnワークスペースを使用してプロジェクトロジックを多くのパッケージに分割する方法を確認することをお勧めします。 Reactは良いものです。

また、このアプローチを使用してバックエンドアプリとフロントエンドアプリを独立したパッケージに分割する本番Webサイトを見たい場合は、ブログ管理者を含む私のWebサイトのソースを確認できます。 Yarnワークスペースを使用するようにコードベースを移行したときに、KyleWetchを使用してプルリクエストを作成しました。

さらに、React、webpack、Node.js、Yarnワークスペースを使用するハッカソンプロジェクトのインフラストラクチャをセットアップしました。ここでソースコードを確認できます。

最後に、開発ライフサイクルに慣れるために、独立したパッケージを公開する方法を学ぶことは非常に興味深いことです。 チェックするのに興味深いチュートリアルがいくつかあります：yarnpublishまたはnpmpublish。

コメントや質問があれば、遠慮なくツイッターで私に連絡してください。 また、今後数か月以内に、これに関するコンテンツをブログで公開する予定ですので、そこでも購読することができます。 ハッピーコーディング！