插件开发

Backstage插件为Backstage应用程序提供功能。

每个插件都被视为一个独立的网络应用程序，几乎可以包含任何类型的内容。 插件都使用一套通用的平台 API 和可重复使用的用户界面组件。 插件可以使用常规的浏览器 API 或依赖外部模块从外部获取数据。

制定指导方针

• 考虑使用 TypeScript 编写插件。 * 规划插件的目录结构，使其易于管理。 * 优先使用 Backstage 组件，否则请使用 Material UI。 * 在构建新的Backstage API 之前，请查看共享的Backstage API。

插件概念/应用程序接口

路由

每个插件都可以导出可路由扩展，然后将其导入应用程序并安装到某个路径上。

首先，您需要一个RouteRef实例作为扩展的挂载点。 您可以在自己的插件中使用该实例创建指向扩展页面的链接，使用useRouteRef以及其他插件链接到您的扩展。

最好将它们放在单独的顶级src/routes.ts文件，以避免导入循环，例如像这样：

/* src/routes.ts */
import { createRouteRef } from '@backstage/core-plugin-api';

// Note: This route ref is for internal use only, don't export it from the plugin
export const rootRouteRef = createRouteRef({
  id: 'Example Page',
});

现在我们有了RouteRef我们将其导入src/plugin.ts创建我们的插件实例createPlugin来创建和封装我们的可路由扩展。createRoutableExtension从@backstage/core-plugin-api:

/* src/plugin.ts */
import { createPlugin, createRouteRef } from '@backstage/core-plugin-api';
import ExampleComponent from './components/ExampleComponent';

// Create a plugin instance and export this from your plugin package
export const examplePlugin = createPlugin({
  id: 'example',
  routes: {
    root: rootRouteRef, // This is where the route ref should be exported for usage in the app
  },
});

// This creates a routable extension, which are typically full pages of content.
// Each extension should also be exported from your plugin package.
export const ExamplePage = examplePlugin.provide(
  createRoutableExtension({
    name: 'ExamplePage',
    // The component needs to be lazy-loaded. It's what will actually be rendered in the end.
    component: () =>
      import('./components/ExampleComponent').then(m => m.ExampleComponent),
    // This binds the extension to this route ref, which allows for routing within and across plugin extensions
    mountPoint: rootRouteRef,
  }),
);

然后，就可以在应用程序中导入和使用该扩展，通常将其置于顶层的<FlatRoutes>:

<Route path="/any-path" element={<ExamplePage />} />