Memisahkan Wasp TS Config?

Wasp TS Config: Strategi untuk Organisasi Kod Yang Diperbaik

Konfigurasi TS Wasp, yang diperkenalkan dalam v0.15, bertujuan untuk memudahkan pembangunan dengan ciri seperti sokongan fail berbilang Wasp dan integrasi editor yang dipertingkatkan. Walaupun sokongan berbilang fail langsung dirancang untuk keluaran masa hadapan, kami sudah boleh menambah baik organisasi kod dan mengurangkan saiz main.wasp.ts.

Kaedah: Memodulasi Konfigurasi

Pendekatan ini melibatkan mengekstrak bahagian konfigurasi yang berbeza (halaman, pekerjaan, pertanyaan, tindakan, dll.) ke dalam modul yang berasingan. Ini meningkatkan kebolehbacaan dan kebolehselenggaraan.

Bahagian 1: Menyahganding Takrif Halaman

Untuk mengasingkan takrif halaman, kami boleh mencipta fail konfigurasi khusus (cth., pages.config.ts).

Langkah 1: Buat pages.config.ts

Fail ini mengeksport fungsi yang menjana konfigurasi halaman berdasarkan contoh app yang disediakan:

<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>

Pertimbangkan untuk meletakkan fail ini dalam direktori khusus (cth., wasp-config).

Langkah 2: Mengimport dan Menggunakan pages.config.ts dalam main.wasp.ts

Import fungsi pagesConfig dan hantar contoh app kepadanya:

<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>

Bahagian 2: Memodulatkan Pekerjaan, Pertanyaan dan Tindakan

Strategi modularisasi yang sama digunakan pada pekerjaan, pertanyaan dan tindakan. Mari berdemonstrasi dengan pekerjaan menggunakan jobs.config.ts.

Langkah 1: Buat jobs.config.ts

Fail ini mentakrifkan fungsi untuk menjana konfigurasi kerja:

<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>

Langkah 2: Mengimport dan Menggunakan jobs.config.ts dalam main.wasp.ts

Import dan gunakan fungsi jobConfigs sama seperti konfigurasi halaman:

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

const { dailyStatsJobConfig } = jobConfigs(app);

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

Kesimpulan

Pendekatan modular ini meningkatkan dengan ketara penyusunan konfigurasi Wasp anda, meningkatkan kebolehbacaan dan kebolehselenggaraan sementara menunggu sokongan rasmi untuk berbilang fail Wasp. Teknik ini menawarkan penyelesaian praktikal untuk menguruskan projek Wasp yang kompleks walaupun tanpa sokongan berbilang fail langsung. Ingat untuk menyesuaikan pendekatan ini untuk pertanyaan dan tindakan mengikut keperluan.

Atas ialah kandungan terperinci Memisahkan Wasp TS Config?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!