mcpField
U
umbraco-bundle

umbraco-bundle

github.com/umbraco開発27388 回インストール6 週間前に更新
リポジトリ

umbraco-bundle について

umbraco-bundle は、Umbraco バックオフィス拡張の Bundle 作成を支援するスキルです。最新ドキュメントの確認から、マニフェストと JavaScript または TypeScript ファイルの生成まで案内します。

主な機能

  1. 01複数の拡張マニフェストを Bundle に集約
  2. 02JavaScript と TypeScript のマニフェストに対応
  3. 03複数ファイルからマニフェストを再エクスポート
  4. 04ドキュメント確認とコード生成を案内

活用シーン

  1. 01関連するバックオフィス拡張の整理
  2. 02Bundle とパッケージマニフェストの生成
  3. 03機能ごとのマニフェストファイル分割

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-bundle

インストール後、Claude Code で/umbraco-bundleを入力して読み込まれたか確認します。

詳細

Umbraco Bundle

これは何ですか？

Bundle は、JavaScript/TypeScript で記述された拡張機能マニフェストをエクスポートまたは再エクスポートする単一の JavaScript ファイルを指す拡張機能タイプです。複数の拡張機能マニフェストをまとめてグループ化するためのコンテナとして機能し、マニフェストを JSON ではなくコードで宣言したり、拡張機能をモジュール形式で整理したりすることができます。

ドキュメント

実装する前に、常に最新のドキュメントを取得してください：

ワークフロー

  1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
  2. 質問する - どの拡張機能をバンドルしますか？TypeScript それとも JavaScript ですか？
  3. ファイルを生成 - 最新のドキュメントに基づいてマニフェスト + バンドルファイルを作成します
  4. 説明 - 何が作成されたか、そしてどのようにテストするかを示します

最小限の例

マニフェスト (umbraco-package.json)
{
  "name": "My Package",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "bundle",
      "alias": "My.Package.Bundle",
      "name": "My Package Bundle",
      "js": "/App_Plugins/MyPackage/manifests.js"
    }
  ]
}
バンドルファイル (manifests.ts)
import type { UmbExtensionManifest } from '@umbraco-cms/backoffice/extension-api';

export const manifests: Array<UmbExtensionManifest> = [
  {
    type: 'dashboard',
    name: 'My Dashboard',
    alias: 'My.Dashboard',
    element: () => import('./dashboard.js'),
    weight: 900,
    meta: {
      label: 'My Dashboard',
      pathname: 'my-dashboard',
    },
    conditions: [
      {
        alias: 'Umb.Condition.SectionAlias',
        match: 'Umb.Section.Content',
      },
    ],
  },
  {
    type: 'headerApp',
    name: 'My Header App',
    alias: 'My.HeaderApp',
    element: () => import('./header-app.js'),
    meta: {
      label: 'My App',
      icon: 'icon-heart',
    },
  },
];
複数のファイルからの再エクスポート
// manifests.ts
export * from './dashboards/manifests.js';
export * from './header-apps/manifests.js';
export * from './sections/manifests.js';

以上です！常に最新のドキュメントを取得し、例は最小限に保ち、完全に動作するコードを生成してください。

コメント

Markdown 対応