コード生成
モノレポを個々のワークスペースに分割することは、コードを整理し、タスクを高速化し、ローカル開発エクスペリエンスを向上させるための優れた方法です。Turborepoのコード生成を使用すると、リポジトリの他の部分と統合された構造化された方法で、パッケージ、モジュール、さらには個々のUIコンポーネントの新しいソースコードを簡単に生成できます。
空のワークスペースを追加する
モノレポに新しい空のアプリまたはパッケージを追加します。
turbo gen workspace
gen workspace
の利用可能なすべてのオプションを表示します。
既存のワークスペースをコピーする
既存のワークスペースを、新しいアプリまたはパッケージのテンプレートとして使用できます。これは、既存のモノレポ内のワークスペースと、他のリポジトリからのリモートワークスペース(GitHub URLで指定)の両方で機能します。
例
リポジトリ内の既存のワークスペースからコピーして、モノレポに新しいワークスペースを作成します。
turbo gen workspace --copy
リモートワークスペースからコピーして、モノレポに新しいワークスペースを作成します。
turbo gen workspace --copy https://github.com/vercel/turbo/tree/main/examples/with-tailwind/packages/tailwind-config
注: リモートソースから追加する場合、Turborepoは、リポジトリに必要なすべての依存関係があること、および正しいパッケージマネージャーを使用していることを確認できません。この場合、リポジトリ内で新しいワークスペースを期待どおりに機能させるには、手動による変更が必要になる場合があります。
gen workspace --copy
の利用可能なすべてのオプションを表示します。
カスタムジェネレーター
組み込みジェネレーターがニーズに合わない場合は、Plop (新しいタブで開きます)構成を使用して、独自のカスタムジェネレーターを作成できます。Turborepoは、リポジトリ内のジェネレーター構成を自動的に検出し、コマンドラインから実行できるようにします。
注: TurborepoジェネレーターはPlopの上に構築されていますが、リポジトリに依存関係としてplop
をインストールする必要はありません。
TurborepoはすべてのPlop構成オプションと機能を理解していますが、Turborepoで構成されたリポジトリ内でジェネレーターを作成するエクスペリエンスを向上させるためのいくつかの追加機能を提供します。
- ジェネレーターは、ワークスペースごとに自動的に検出、ロード、および整理されます(単一の構成ファイル内で手動で
load
する必要はありません) - ジェネレーターは、定義されているワークスペースのルートから自動的に実行されます
- ジェネレーターは、リポジトリ内の任意の場所から(または、
--root
フラグを介して外部から)呼び出すことができます - Typescriptジェネレーターは、構成なしでサポートされています
plop
は、リポジトリの依存関係としてインストールする必要はありません
注: ESMの依存関係は、現在、カスタムジェネレーター内ではサポートされていません
はじめに
カスタムジェネレーターをビルドおよび実行するには、Turborepoを使用して、モノレポ内の任意の場所から次のコマンドを実行します。
turbo gen
既存のジェネレーターを選択するか、まだない場合はジェネレーターを作成するように求められます。また、turbo/generators/config.ts
(またはconfig.js
)で、リポジトリのルートまたは任意のワークスペース内で、構成を手動で作成することもできます。
注意: TypeScript を使用している場合は、必要な TS 型にアクセスするために、@turbo/gen
(新しいタブで開きます) パッケージを devDependency
としてインストールする必要があります。
例えば、以下は3つのジェネレーター構成を持つモノレポを示しています。
- root
- apps/web
- packages/ui
├── package.json
├── turbo.json
├── README.md
├── apps
│ └── web
│ ├── package.json
│ └── turbo
│ └── generators
│ ├── config.ts
│ └── templates
├── packages
│ └── ui
│ ├── package.json
│ └── turbo
│ └── generators
│ ├── config.ts
│ └── templates
├── turbo
│ └── generators
│ ├── config.ts
│ └── templates
├── pnpm-lock.yaml
└── pnpm-workspace.yaml
ワークスペース内で作成されたジェネレーターは、リポジトリのルートではなく、ジェネレーター構成の場所でもなく、ワークスペースのルートから自動的に実行されます。
これにより、ジェネレーターの記述がより簡単になります。[ワークスペースルート]
にファイルを作成するには、<file>
と指定するだけで済みます。../../<file>
と指定する必要はありません。
Plop を使用したカスタムジェネレーターの作成 (新しいタブで開きます)について詳しくはこちらをご覧ください。
ジェネレーターの記述
ジェネレーター構成ファイルは、Plop (新しいタブで開きます)構成オブジェクトを返す関数です。構成オブジェクトは、ジェネレーターのプロンプトとアクションを定義するために使用されます。
最も単純な形式では、ジェネレーター構成ファイルは次のようになります。
import type { PlopTypes } from "@turbo/gen";
export default function generator(plop: PlopTypes.NodePlopAPI): void {
// create a generator
plop.setGenerator("Generator name", {
description: "Generator description",
// gather information from the user
prompts: [
...
],
// perform actions based on the prompts
actions: [
...
],
});
}
プロンプト
プロンプトはPlop プロンプト (新しいタブで開きます)を使用して記述され、ユーザーから情報を収集するために使用されます。
アクション
アクションでは、組み込みの Plop アクション (新しいタブで開きます)、または自分で定義したカスタムアクション関数 (新しいタブで開きます)を使用できます。
import type { PlopTypes } from "@turbo/gen";
const customAction: PlopTypes.CustomActionFunction = async (answers) => {
// fetch data from a remote API
const results = await fetchRemoteData();
// add the response to the answers, making this data available to actions
answers.results = results;
// return a status string
return 'Finished data fetching!';
}
export default function generator(plop: PlopTypes.NodePlopAPI): void {
// create a generator
plop.setGenerator("Generator name", {
description: "Generator description",
prompts: [
...
],
actions: [
customAction
{/* actions now have access to `answers.results` */}
...
],
});
}
ジェネレーターの実行
ジェネレーター構成ファイルを作成したら、選択プロンプトをスキップして、次のコマンドで特定のジェネレーターを直接実行できます。
turbo gen [generator-name]
引数は、--args
を使用してジェネレーターのプロンプトに直接渡すこともできます。
turbo gen [generator-name] --args answer1 answer2 ...
詳細については、Plopドキュメントのプロンプトのバイパス (新しいタブで開きます)を参照してください。
gen
の利用可能なすべてのオプションを表示します。
例
vercel/turbo (新しいタブで開きます) モノレポには、独自の開発に使用されるいくつかのカスタム Turborepo ジェネレーターが含まれています。
- 新しいブログ記事を作成する (新しいタブで開きます) - NPM および Github API から取得したライブ統計を使用して、新しいリリースブログ記事を作成します。
- 新しいコード変換を作成する (新しいタブで開きます) - すべてのボイラープレートとテストを備えた
@turbo/codemod
(新しいタブで開きます) の新しいコード変換を作成します。
Turborepo の例