Back to Details

umbraco-bundle

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Umbraco Bundle

Umbraco Bundle

What is it?

什么是Bundle？

A Bundle is an extension type that points to a single JavaScript file that exports or re-exports Extension Manifests written in JavaScript/TypeScript. It serves as a container for grouping multiple extension manifests together, allowing you to declare manifests in code rather than JSON and organize extensions in a modular way.
Bundle是一种扩展类型，指向单个JavaScript文件，该文件导出或重新导出以JavaScript/TypeScript编写的Extension Manifest（扩展清单）。它用作将多个扩展清单分组在一起的容器，允许你通过代码而非JSON声明清单，并以模块化方式组织扩展。

Documentation

文档

Always fetch the latest docs before implementing:
在实现前请务必获取最新文档：

Workflow

工作流程

  1. Fetch docs - Use WebFetch on the URLs above
  2. Ask questions - What extensions to bundle? TypeScript or JavaScript?
  3. Generate files - Create manifest + bundle file based on latest docs
  4. Explain - Show what was created and how to test
  1. 获取文档 - 通过WebFetch获取上述URL的内容
  2. 确认问题 - 要打包哪些扩展？使用TypeScript还是JavaScript？
  3. 生成文件 - 根据最新文档创建清单和bundle文件
  4. 说明解释 - 展示创建的内容以及测试方法

Minimal Examples

最简示例

Manifest (umbraco-package.json)

清单文件（umbraco-package.json）

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"
    }
  ]
}
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 File (manifests.ts)

Bundle文件（manifests.ts）

typescript
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',
    },
  },
];
typescript
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',
    },
  },
];

Re-exporting from Multiple Files

从多个文件重新导出

typescript
// manifests.ts
export * from './dashboards/manifests.js';
export * from './header-apps/manifests.js';
export * from './sections/manifests.js';
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
typescript
// manifests.ts
export * from './dashboards/manifests.js';
export * from './header-apps/manifests.js';
export * from './sections/manifests.js';
就是这样！请始终获取最新文档，保持示例最简，生成完整可运行的代码。