umbraco-bundle

Umbraco Bundle

它是什么？

Bundle 是一种扩展类型，指向单个 JavaScript 文件，该文件会导出或重新导出以 JavaScript/TypeScript 编写的扩展清单。它用作容器，将多个扩展清单组合在一起，让你可以在代码中而非 JSON 中声明清单，并以模块化的方式组织扩展。

文档

实现前，请务必获取最新文档：

• 主要文档：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/bundle
• 基础知识：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• 扩展注册表：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry

工作流

1. 获取文档 - 使用 WebFetch 获取上述 URL
2. 提出问题 - 要将哪些扩展打包在一起？使用 TypeScript 还是 JavaScript？
3. 生成文件 - 根据最新文档创建清单和 Bundle 文件
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"
    }
  ]
}

Bundle 文件（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';

就是这样！始终获取最新文档，保持示例精简，并生成完整可运行的代码。