#Plugin

Dans NocoBase, le plugin client est le principal moyen d'étendre et de personnaliser les fonctionnalités du frontend. En héritant de la classe de base Plugin fournie par @nocobase/client, les développeurs peuvent enregistrer de la logique, ajouter des composants de page, étendre des menus ou intégrer des fonctionnalités tierces à différentes étapes du cycle de vie.

#Structure de la classe de plugin

Voici la structure d'un plugin client de base :

import { Plugin } from '@nocobase/client';

export class PluginHelloClient extends Plugin {
  async afterAdd() {
    // Exécuté après l'ajout du plugin
    console.log('Plugin added');
  }

  async beforeLoad() {
    // Exécuté avant le chargement du plugin
    console.log('Before plugin load');
  }

  async load() {
    // Exécuté lors du chargement du plugin, pour enregistrer les routes, les composants d'interface utilisateur, etc.
    console.log('Plugin loaded');
  }
}

export default PluginHelloClient;

#Description du cycle de vie

Chaque plugin passe séquentiellement par les étapes de cycle de vie suivantes lors du rafraîchissement du navigateur ou de l'initialisation de l'application :

#Ordre d'exécution

Chaque fois que le navigateur est rafraîchi, l'ordre d'exécution est afterAdd() → beforeLoad() → load().

#Contexte du plugin et FlowEngine

À partir de NocoBase 2.0, les API d'extension côté client sont principalement regroupées dans le FlowEngine. Dans la classe de plugin, vous pouvez obtenir l'instance du moteur via this.engine.

// Accéder au contexte du moteur dans la méthode load()
async load() {
  const { app, router, apiClient } = this.engine.context;
  console.log('Current app:', app);
}

Pour plus de détails, consultez :

• FlowEngine
• Contexte