Wasp TS 構成を分割していますか?

Wasp TS Config: コード構成を改善するための戦略

v0.15 で導入された Wasp の TS config は、マルチ Wasp ファイルのサポートやエディター統合の強化などの機能により開発を簡素化することを目的としていました。 将来のリリースではマルチファイルの直接サポートが計画されていますが、コード構成を改善し、main.wasp.ts.

のサイズを削減することはすでに可能です。

方法: 構成のモジュール化

このアプローチには、さまざまな構成セクション (ページ、ジョブ、クエリ、アクションなど) を個別のモジュールに抽出することが含まれます。 これにより、可読性と保守性が向上します。

パート 1: ページ定義の分離

ページ定義を分離するには、専用の構成ファイル (例: pages.config.ts) を作成できます。

ステップ 1: pages.config.ts

を作成する

このファイルは、提供された app インスタンスに基づいてページ構成を生成する関数をエクスポートします:

<code class="language-typescript">// pages.config.ts
export const pagesConfig = (app: any) => {
  const landingPage = app.page('LandingPage', {
    component: { importDefault: 'LandingPage', from: '@src/landing-page/LandingPage' }
  });
  // ... other pages

  return {
    landingPage,
    // ... other pages
  };
};</code>

このファイルを専用のディレクトリ (例: wasp-config) に配置することを検討してください。

ステップ 2: pages.config.tsmain.wasp.ts で

をインポートして使用する

pagesConfig 関数をインポートし、それに app インスタンスを渡します。

<code class="language-typescript">// main.wasp.ts
import { pagesConfig } from './pages.config.ts';
// ... other code

const { landingPage, /* ... other pages */ } = pagesConfig(app);

app.route('LandingPageRoute', { path: '/', to: landingPage });</code>

パート 2: ジョブ、クエリ、アクションのモジュール化

同じモジュール化戦略がジョブ、クエリ、アクションに適用されます。 jobs.config.ts を使用したジョブでデモを行ってみましょう。

ステップ 1: jobs.config.ts

を作成する

このファイルは、ジョブ構成を生成する関数を定義します:

<code class="language-typescript">// jobs.config.ts
import { JobConfig } from "wasp-config";

export const jobConfigs = (app: any) => {
  const dailyStatsJobConfig: JobConfig = {
    executor: 'PgBoss',
    perform: {
      fn: { import: 'calculateDailyStats', from: '@src/analytics/stats' }
    },
    entities: ['User', 'DailyStats', 'Logs', 'PageViewSource']
  };

  return {
    dailyStatsJobConfig
  };
};</code>

ステップ 2: jobs.config.tsmain.wasp.ts で

をインポートして使用する

ページ設定と同様に jobConfigs 関数をインポートして使用します。

<code class="language-typescript">// main.wasp.ts
import { jobConfigs } from './jobs.config.ts';
// ... other code

const { dailyStatsJobConfig } = jobConfigs(app);

app.job('dailyStatsJob', dailyStatsJobConfig);</code>

結論

このモジュール式のアプローチにより、Wasp 構成の構成が大幅に改善され、複数の Wasp ファイルの公式サポートを待つ間、可読性と保守性が向上します。 この手法は、マルチファイルを直接サポートしていなくても、複雑な Wasp プロジェクトを管理するための実用的なソリューションを提供します。必要に応じて、このアプローチをクエリやアクションに適用してください。

以上がWasp TS 構成を分割していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。