モノレポサポートのセットアップ

「モノリシックリポジトリ」（モノレポ）では、複数のプロジェクトやパッケージが単一のリポジトリに含まれています。Vega Studioは、npmとYarnのワークスペースを通じてモノレポレイアウトをサポートします。Yarn v2レイアウトが推奨されますが、v1もサポートされます（nohoistを除く）。 モノレポのサポートにより、次のことが可能になります。

• モノレポパッケージを開く
• VegaプロジェクトをVS CodeまたはKiroワークスペースにインポートする
• 複数のプロジェクトを効率的に管理する

モノレポ構造により、コード共有が可能になり、依存関係の管理が一元化され、プロジェクトの設定手順が削減されます。 Vega SDKには、デフォルトでnpmパッケージマネージャーが含まれています。Yarnを使用する場合は、Yarnワークスペースの設定を参照してください。

​

前提条件

• Vega Studioをセットアップする

​

モノレポのサポートをオンまたはオフにする方法

モノレポのサポートをオンまたはオフにするには、 [Settings] > [Vega] > [Features: Monorepo] を選択し、チェックボックスをオンまたはオフにします。

​

モノレポの動作を変更する方法

1. [Settings] > [Vega] > [Features: Monorepo Synchronization] に移動します。
2. 次のオプションから選択します。
   • [Auto] - モノレポパッケージを開いたとき、またはVS Codeワークスペースに追加したときに、サブパッケージを自動的に検出してインポートします。
   • [Ask for confirmation] - サブパッケージを検出しますが、インポートする前に許可を求めます。

​

さまざまなワークフローの理解

モノレポのレイアウトパッケージを使用する場合、ワークフローは次の点で異なります。 パッケージを開く、追加する

• モノレポパッケージを使用せずにワークスペースを開く - ワークフローに影響を与えることなく、バックグラウンドでパッケージレイアウトを識別します。
• モノレポパッケージを使用してワークスペースを開く - レイアウトを識別し、サブパッケージを列挙し、Vegaプロジェクトを検出してワークスペースに追加します。この動作は、お使いのモノレポ同期設定によって異なります。モノレポの動作を変更する方法を参照してください。
• モノレポパッケージをVS Codeワークスペースに追加する - モノレポパッケージを使用してワークスペースを開くときと同じように機能します。
• Vegaプロジェクトをモノレポに追加する - モノレポへのVegaプロジェクトの追加の手順を参照してください。

ビルド

• モノレポ全体をビルドする - VS Codeのデフォルトのビルドタスクを使用します。 Vega Studioはビルドタスクの自動構成をサポートしていません。設定する必要があります。VS Codeでは、次のいずれかを実行できます。
  • [Terminal] > [Run Build Task] に移動します。
  • キーボードのCmd+Shift+Bキーを押します。
  • コマンドパレットに移動し、「Tasks: Run Build Task」と入力します。

表示

• VS Codeエクスプローラーの表示 - Vegaプロジェクトをモノレポ内に表示し、VS Codeワークスペースに個別のエントリとして表示します。
• Vega Studioの表示 - Vegaプロジェクトを通常どおり表示します。
• その他のワークフロー - モノレポ以外のワークスペースと同じです。

​

モノレポへのVegaプロジェクトの追加

1. モノレポのパッケージディレクトリにあるテンプレートから新しいVegaプロジェクトを作成します。
2. JavaScriptアプリケーションのpackage.json内の依存関係を更新します。
   // 次の行を
   "@prefix/module-name": "file:...../prefix-module-name-0.0.1.tgz"
   // 次のように置き換えます。
   "@prefix/module-name": "*"
   
3. node_modulesパスをmetro.config.jsに追加します。
   const path = require('path');
   
   const config = {
     projectRoot: __dirname,
     watchFolders: [
       path.resolve(__dirname, '../../packages'),
       path.resolve(__dirname, '../../node_modules')
     ],
     resolver: {
       disableHierarchicalLookup: true,
       nodeModulesPaths: [
         path.resolve(__dirname, 'node_modules'),
         path.resolve(__dirname, '../../node_modules')
       ]
     }
   };
   
4. 不要なロックファイルとパッケージアーティファクト（Yarnを使用している場合は特にpackage-lock.jsonファイル）を削除します。
5. corepackを使用するYarnの場合には、package.jsonにパッケージマネージャーを指定します。
   "packageManager": "yarn@x.y.z"
   

​

モノレポに関する問題のトラブルシューティング

Vega Studioでモノレポを操作しているときに問題が発生した場合は、モノレポに関する問題と解決策で解決策を参照してください。

​

次の手順

• アプリの作成
• アプリの実行

​

関連トピック

• React NativeマルチTVサンプルアプリ
• Vega Studioのセットアップ
• Yarnワークスペースのセットアップ
• モノレポに関する問題と解決策

---