#Plugin

Di NocoBase, Plugin Client adalah cara utama untuk memperluas dan menyesuaikan fungsi front-end. Anda dapat extends class dasar Plugin yang disediakan oleh @nocobase/client-v2 di src/client-v2/plugin.tsx direktori plugin Anda, kemudian mendaftarkan route, model, dan resource lainnya dalam siklus hidup load(), dll.

Sebagian besar waktu Anda hanya perlu peduli pada load() — biasanya logika inti didaftarkan pada tahap load().

#Struktur Dasar

// src/client-v2/plugin.tsx
import { Plugin } from '@nocobase/client-v2';

export class PluginHelloClient extends Plugin {
  async afterAdd() {
    // Dieksekusi setelah plugin ditambahkan
    console.log('Plugin added');
  }

  async beforeLoad() {
    // Dieksekusi sebelum load() semua plugin
    console.log('Before load');
  }

  async load() {
    // Dieksekusi saat plugin dimuat, mendaftarkan route, model, dll.
    console.log('Plugin loaded');
  }
}

export default PluginHelloClient;

#Siklus Hidup

Setiap kali browser di-refresh atau aplikasi diinisialisasi, plugin akan mengeksekusi afterAdd() → beforeLoad() → load() secara berurutan:

Biasanya, mengembangkan plugin client cukup menulis load() saja.

#Apa yang Dilakukan di load()

load() adalah entry point inti untuk mendaftarkan fungsi plugin. Operasi umum:

Mendaftarkan Route Halaman:

async load() {
  // Mendaftarkan halaman independen
  this.router.add('hello', {
    path: '/hello',
    componentLoader: () => import('./pages/HelloPage'),
  });

  // Mendaftarkan halaman pengaturan plugin (menu + halaman)
  this.pluginSettingsManager.addMenuItem({
    key: 'hello-settings',
    title: this.t('Hello Settings'),
    icon: 'SettingOutlined',
  });
  this.pluginSettingsManager.addPageTabItem({
    menuKey: 'hello-settings',
    key: 'index',
    title: this.t('Hello Settings'),
    componentLoader: () => import('./pages/HelloSettingPage'),
  });
}

Untuk penggunaan detail lihat Router.

Mendaftarkan FlowModel:

async load() {
  this.flowEngine.registerModelLoaders({
    HelloModel: {
      // Dynamic import, modul yang sesuai akan dimuat saat model ini benar-benar digunakan pertama kali
      loader: () => import('./HelloModel'),
    },
  });
}

registerModelLoaders menggunakan loading sesuai kebutuhan (dynamic import), modul akan dimuat hanya saat model digunakan pertama kali, ini adalah cara registrasi yang direkomendasikan. Untuk penggunaan detail lihat FlowEngine.

#Property Umum Plugin

Dalam class plugin, property berikut dapat langsung diakses melalui this:

Jika perlu mengakses lebih banyak kapabilitas NocoBase (seperti api, t(i18n), logger), dapat diperoleh melalui this.context:

async load() {
  const { api, t, logger } = this.context;
}

Untuk lebih banyak kapabilitas konteks lihat Context.

#Tautan Terkait

• Router — Mendaftarkan route halaman dan halaman pengaturan plugin
• Pengembangan Component — Cara menulis Component React yang di-mount oleh route
• Context — Menggunakan kapabilitas bawaan NocoBase melalui konteks
• FlowEngine — Mendaftarkan Block, Field, Action, dan Component konfigurasi visual lainnya
• Menulis Plugin Pertama — Membuat plugin dari nol