插件结构

很好，你有了一个新插件！我们很快就会看到如何开发它，让它大显身手。 但首先，让我们来看看开箱即用的功能。

文件夹结构

新插件应该是这样的

new-plugin/
    dev/
        index.ts
    node_modules/
    src/
        components/
            ExampleComponent/
                ExampleComponent.test.tsx
                ExampleComponent.tsx
                index.ts
            ExampleFetchComponent/
                ExampleFetchComponent.test.tsx
                ExampleFetchComponent.tsx
                index.ts
        index.ts
        plugin.test.ts
        plugin.ts
        routes.ts
        setupTests.ts
    .eslintrc.js
    package.json
    README.md

你可能会注意到一两件事：是的，一个插件看起来就像一个独立的小型项目，带有一个package.json和一个src这是因为我们希望插件是独立的软件包。 这样就可以在 npm 上发布插件，也可以让你单独处理一个插件，而不用在一个可能很大的 Backstage 应用程序中加载所有其他插件。

index.ts文件是为了让我们从文件夹路径而不是特定文件中导入。 这是一种控制每个文件夹导出一个文件的方法。

基本文件

你会得到一个 readme 来填充关于你的插件的信息，以及一个 package.json 来声明插件的依赖关系、元数据和脚本。

插件文件

在src下面我们来看看有趣的部分。plugin.ts:

import {
  createPlugin,
  createRoutableExtension,
} from '@backstage/core-plugin-api';

import { rootRouteRef } from './routes';

export const examplePlugin = createPlugin({
  id: 'example',
  routes: {
    root: rootRouteRef,
  },
});

export const ExamplePage = examplePlugin.provide(
  createRoutableExtension({
    name: 'ExamplePage',
    component: () =>
      import('./components/ExampleComponent').then(m => m.ExampleComponent),
    mountPoint: rootRouteRef,
  }),
);

在此创建插件，并创建和导出可在应用程序中导入和使用的扩展。 请参阅以下参考文档创建插件或介绍新的可组合系统.

组件

生成的插件包括两个示例组件，以展示我们是如何构建插件的。 通常有一个或多个页面组件，在它们旁边，您可以根据自己的喜好将用户界面分成多个组件。

我们有ExampleComponent显示一个Backstage页面组件示例。ExampleFetchComponent展示了向公共 API 发出异步请求并使用 Material UI 组件在表格中绘制响应数据的常见任务。

您可以对这些组件进行调整、重命名和/或完全替换。

将插件连接到Backstage应用程序

Backstage 应用程序开始使用插件需要具备两个条件。

1.在 app/package.json 中添加插件作为依赖 2.导入并使用一个或多个插件扩展，例如在 app/src/App.tsx 中。

幸运的是，使用Backstage CLI 创建插件时，这两个步骤都会自动进行。

与外界交流

如果您的插件需要与Backstage环境之外的服务通信，您可能会面临 CORS 策略和/或后端授权等挑战。 要顺利完成这一过程，您可以使用代理--您已经拥有的代理(如 Nginx、HAProxy 等)或我们为Backstage提供的代理-后端插件。更多信息