logologo
スタート
マニュアル
開発
プラグイン
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
スタート
マニュアル
開発
プラグイン
API
logologo

クイックスタート

プラグイン開発概要
最初のプラグインを作成
プロジェクトディレクトリ構造

サーバーサイド開発

概要
プラグイン
コレクション
データベース操作
データソース管理
リソース管理
ACL権限制御
ミドルウェア
キャッシュ
イベント
リクエストコンテキスト
マイグレーション
ロガー
I18n 国際化
コマンド
定時タスク管理
テスト

クライアントサイド開発

概要
プラグイン
コンテキスト
ルーター
ACL権限制御
データソース管理
リソース
リクエスト
スタイルとテーマ
ロガー
I18n 国際化
テスト

その他

プラグインアップグレードガイド
言語一覧
依存関係の管理
ビルド
Previous Page概要
Next Pageコンテキスト
TIP

このドキュメントはAIによって翻訳されました。不正確な情報については、英語版をご参照ください

#プラグイン

NocoBaseでは、クライアントプラグイン(Client Plugin) がフロントエンドの機能を拡張し、カスタマイズするための主要な方法です。@nocobase/client が提供する Plugin 基底クラスを継承することで、開発者はさまざまなライフサイクル段階でロジックを登録したり、ページコンポーネントを追加したり、メニューを拡張したり、サードパーティ機能を統合したりできます。

#プラグインクラスの構造

最も基本的なクライアントプラグインの構造は以下のとおりです。

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

export class PluginHelloClient extends Plugin {
  async afterAdd() {
    // プラグインが追加された後に実行されます
    console.log('Plugin added');
  }

  async beforeLoad() {
    // プラグインがロードされる前に実行されます
    console.log('Before plugin load');
  }

  async load() {
    // プラグインがロードされるときに実行されます(ルーティングやUIコンポーネントの登録など)
    console.log('Plugin loaded');
  }
}

export default PluginHelloClient;

#ライフサイクルの説明

ブラウザのリフレッシュ時やアプリケーションの初期化時に、各プラグインは以下のライフサイクルを順に経ます。

ライフサイクルメソッド実行タイミング説明
afterAdd()プラグインがプラグインマネージャーに追加された直後に実行されますこの時点ではプラグインインスタンスは作成されていますが、すべてのプラグインの初期化が完了しているわけではありません。設定の読み込みや基本的なイベントのバインディングなど、軽量な初期化に適しています。
beforeLoad()すべてのプラグインの load() の前に実行されます有効化されているすべてのプラグインインスタンス(this.app.pm.get())にアクセスできます。他のプラグインに依存する準備ロジックの実行に適しています。
load()プラグインがロードされるときに実行されますすべてのプラグインの beforeLoad() が完了した後にこのメソッドが実行されます。フロントエンドのルーティングやUIコンポーネントなどのコアロジックの登録に適しています。

#実行順序

ブラウザがリフレッシュされるたびに、afterAdd() → beforeLoad() → load() の順で実行されます。

#プラグインコンテキストとFlowEngine

NocoBase 2.0 以降、クライアント側の拡張APIは主に FlowEngine に集約されています。プラグインクラス内では、this.engine を介してエンジンインスタンスを取得できます。

// `load()` メソッド内でエンジンコンテキストにアクセスします
async load() {
  const { app, router, apiClient } = this.engine.context;
  console.log('Current app:', app);
}

詳細については、以下を参照してください。

  • FlowEngine
  • Context