拆分 Wasp TS 配置？

Wasp TS Config：改善程式碼組織的策略

Wasp 的 TS 配置在 v0.15 中引入，旨在透過多 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中文網其他相關文章！