アーキテクチャ

この図は、Docusaurus がアプリをビルドする方法を示しています。各プラグインは自分のコンテンツを収集し、JSON データを出力します。テーマは、JSON データをルートモジュールとして受け取るレイアウトコンポーネントを提供します。バンドラはすべてのコンポーネントをバンドルし、サーバーバンドルとクライアントバンドルを出力します。

常に JavaScript を記述している (プラグイン作者またはサイト作成者のいずれかが) 場合でも、JS は実際には異なる環境で実行されていることに留意してください。

• プラグインのライフサイクルメソッドはすべて Node で実行されます。そのため、コードベースで ES モジュールをサポートするまでは、プラグインのソースコードは、インポート可能な ES モジュール、または require できる CommonJS として提供する必要があります。
• テーマコードは Webpack でビルドされます。React の規約に従って、ESM として提供できます。

プラグインコードとテーマコードは、互いに直接インポートすることは決してありません。プロトコル (ここでは JSON 一時ファイルと addRoute の呼び出し) を介してのみ通信します。プラグインが JavaScript ではなく Rust などの別の言語で書かれていると想像すると、有益な精神モデルになります。ユーザーがプラグインと対話する唯一の方法は docusaurus.config.js を介しており、それ自体が Node で実行されます (そのため、 require を使用してプラグインオプションとしてコールバックを渡すことができます)。

バンドル中に設定ファイル自体がシリアル化されてバンドルされ、テーマは useDocusaurusContext() を介して themeConfig や baseUrl などの設定オプションにアクセスできます。ただし、siteConfig オブジェクトには シリアル化可能な値 (JSON.stringify() の後で保持される値) のみが含まれます。関数、正規表現などは、クライアント側で失われます。themeConfig は完全にシリアル化可能になるように設計されています。