Fractionner la configuration Wasp TS ?

Wasp TS Config : stratégies pour une meilleure organisation du code

La configuration TS de Wasp, introduite dans la v0.15, visait à simplifier le développement avec des fonctionnalités telles que la prise en charge de fichiers multi-Wasp et une intégration améliorée de l'éditeur. Bien que la prise en charge directe de plusieurs fichiers soit prévue pour les prochaines versions, nous pouvons déjà améliorer l'organisation du code et réduire la taille de main.wasp.ts.

Méthode : Modularisation de la configuration

Cette approche consiste à extraire différentes sections de configuration (pages, jobs, requêtes, actions, etc.) dans des modules distincts. Cela améliore la lisibilité et la maintenabilité.

Partie 1 : Découplage des définitions de pages

Pour séparer les définitions de page, nous pouvons créer un fichier de configuration dédié (par exemple, pages.config.ts).

Étape 1 : Créer pages.config.ts

Ce fichier exporte une fonction qui génère des configurations de page basées sur l'app instance fournie :

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

Pensez à placer ce fichier dans un répertoire dédié (par exemple, wasp-config).

Étape 2 : Importer et utiliser pages.config.ts dans main.wasp.ts

Importez la fonction pagesConfig et transmettez-lui l'instance 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>

Partie 2 : Modularisation des tâches, des requêtes et des actions

La même stratégie de modularisation s'applique aux tâches, aux requêtes et aux actions. Montrons-le avec des tâches utilisant jobs.config.ts.

Étape 1 : Créer jobs.config.ts

Ce fichier définit une fonction pour générer des configurations de tâches :

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

Étape 2 : Importer et utiliser jobs.config.ts dans main.wasp.ts

Importez et utilisez la fonction jobConfigs de la même manière que la configuration de la page :

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

const { dailyStatsJobConfig } = jobConfigs(app);

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

Conclusion

Cette approche modulaire améliore considérablement l'organisation de votre configuration Wasp, améliorant la lisibilité et la maintenabilité en attendant la prise en charge officielle de plusieurs fichiers Wasp. Cette technique offre une solution pratique pour gérer des projets Wasp complexes même sans prise en charge directe de plusieurs fichiers. N'oubliez pas d'adapter cette approche pour les requêtes et les actions selon les besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!