wix-cli-extension-registration

Wix アプリの登録

拡張機能ファイルを作成したら、必ずメインの src/extensions.ts ファイルを更新して、アプリに拡張機能を登録してください。

登録が重要な理由

Wix CLI は src/extensions.ts ファイルを通じて拡張機能を検出します。このファイルは、どの拡張機能が存在するかをビルドシステムに伝える唯一のエントリーポイントです。登録しないと、次の問題が発生します。

• ダッシュボードページがサイドバーに表示されません
• サイトウィジェットが Wix Editor に表示されません
• サービスプラグインがチェックアウトのフロー中に呼び出されません
• イベントハンドラーが Webhook の配信を受け取れません
• 埋め込みスクリプトがサイトページに挿入されません

「拡張機能が動作しない」という問題の最も一般的な原因は、このファイルで .use() の呼び出しが抜けていることです。

シンプルなパターン（小規模なアプリに推奨）

src/extensions.ts - 拡張機能を直接インポートして登録します。

import { app } from "@wix/astro/builders";
import { dataExtension } from "./extensions/data/extensions.ts";
import { dashboardpageMyPage } from "./extensions/dashboard/pages/my-page/extensions.ts";
import { embeddedscriptMyScript } from "./extensions/site/embedded-scripts/my-script/extensions.ts";

export default app()
  .use(dataExtension)
  .use(dashboardpageMyPage)
  .use(embeddedscriptMyScript);

新しい拡張機能ごとの手順：

1. extensions.ts ファイルから拡張機能をインポートします
2. アプリのチェーンに .use(extensionName) を追加します
3. 複数の拡張機能をチェーンでつなぎます

高度なパターン（大規模なアプリ向け）

src/index.ts - すべての拡張機能を再エクスポートします。

export { dashboardpageMyPage } from "./extensions/dashboard/pages/my-page/extensions";
export { embeddedscriptMyScript } from "./extensions/site/embedded-scripts/my-script/extensions";
export { dataExtension } from "./extensions/data/extensions";

src/extensions.ts - すべての拡張機能をプログラムで登録します。

import { app } from "@wix/astro/builders";
import * as allExtensions from "./index";

const extensionList = Object.values(allExtensions);

const appBuilder = app();
extensionList.forEach((extension) => {
  appBuilder.use(extension);
});

export default appBuilder;

登録が不要な拡張機能の種類

次の種類の拡張機能には、extensions.ts ファイルは不要です。

• バックエンド API - Astro のサーバーエンドポイントは自動的に検出されます

命名規則

拡張機能のエクスポート名は、次のパターンに従います：{extensiontype}{CamelCaseName}

例：

• dashboardpageCartPopupManager
• dashboardpluginBlogPostsBanner
• dashboardmenupluginExportPosts
• embeddedscriptCouponPopup
• sitewidgetCountdownWidget
• sitepluginProductBadge
• ecomshippingratesCustomShipping

型の接頭辞は、区切り文字を使わずに小文字で表記した拡張機能の種類です。

トラブルシューティング

症状	原因	対処方法
拡張機能がまったく表示されない	.use() の呼び出しがない	src/extensions.ts にインポートと .use(extensionName) を追加します
ビルド時に「Cannot find module」と表示される	インポートパスが誤っている	インポートのパスが実際のファイルの場所（src/ からの相対パス）と一致していることを確認します
拡張機能は登録されているが動作しない	エクスポート名が一致しない	拡張機能ファイル内のエクスポート名が、extensions.ts でのインポート名と一致していることを確認します
複数の拡張機能のうち、一部しか動作しない	チェーンが不完全	すべての拡張機能にインポートと .use() の呼び出しの両方があることを確認します
.use() で TypeScript エラーが発生する	エクスポートの型が誤っている	拡張機能ファイルで正しいビルダーメソッド（例：extensions.embeddedScript() ではなく extensions.dashboardPage()）を使用していることを確認します