Skip to main content

从旧的前台系统迁移实用程序接口

**注意：新的前台系统处于alpha阶段，只有少数插件支持。

如果您要将插件或应用程序从旧的前台系统迁移过来，在实用程序编程接口方面有几件事需要注意。

概览​

  • 将你的软件仓库整体迁移到最新发布的 backstage * 遵循插件迁移指南 * 可选将你的软件包依赖关系和代码从 core-*-api 改为 frontend-*-api * 保持 TypeScript 接口和 API ref 输出的原样，只是可能要重新考虑后者 ID 的选择 * 使用 createApiExtension 将旧的 API 工厂调用包在一个扩展中 * 确保你迁移的插件引用了这个扩展

先决条件​

本指南假定您首先升级您的补丁这样，您就不必同时面对几种不兼容和更新。

依赖关系变化​

在这篇文章中，我们将讨论一些旧接口，您可以从@backstage/core-plugin-api包，现在一般都转到@backstage/frontend-plugin-api的新界面旁边。 如果您愿意，可以更新您的package.json旧的核心导出在可预见的未来仍将继续使用。

要至少访问新界面，您需要运行以下命令。 请注意，这只是一个示例！它指的是plugins/example，你必须将其更改为要迁移的软件包所在的实际文件夹名称。

from your repo root
yarn --cwd plugins/example add @backstage/frontend-plugin-api

React 软件包接口和 ref 的更改​

让我们从您的导出 TypeScript 接口和 API 引用的行为与旧系统相比没有变化。 通常可以保持原样。 为了说明问题，下面是一个接口及其 API 引用的示例：

in @internal/plugin-example-react
import { createApiRef } from '@backstage/frontend-plugin-api';

/**
 * Performs some work.
 * @public
 */
export interface WorkApi {
  doWork(): Promise<void>;
}

/**
 * The work interface for the Example plugin.
 * @public
 */
export const workApiRef = createApiRef<WorkApi>({
  id: 'plugin.example.work',
});

在本例中，插件 ID 已如下所示<！--待办事项：链接-->如果没有，你可以考虑重命名该 ID。 不用担心，这不会影响旧前端系统的用户，因为该 ID 主要用于调试目的。 在新系统中，它更重要，会出现在应用程序配置文件和类似文件中。

请在文件顶部注意，它使用的是更新后的从@backstage/frontend-plugin-api而不是旧的@backstage/core-plugin-api.

插件包更改​

现在我们来看看主插件包，插件本身就是在这里导出的。 您可能已经有了一个createPlugin在我们更改core-plugin-api进口产品看起来会与下面的产品有些相似：

in @internal/plugin-example, NOTE THIS IS LEGACY CODE
import {
  storageApiRef,
  createPlugin,
  createApiFactory,
} from '@backstage/core-plugin-api';
import { workApiRef } from '@internal/plugin-example-react';
import { WorkImpl } from './WorkImpl';

const exampleWorkApi = createApiFactory({
  api: workApiRef,
  deps: { storageApi: storageApiRef },
  factory: ({ storageApi }) => new WorkImpl({ storageApi }),
});

/** @public */
export const catalogPlugin = createPlugin({
  id: 'example',
  apis: [exampleWorkApi],
});

我们将做出的主要改变是

  • 将现有的 API 工厂封装在 createApiExtension 中 * 改为导出此扩展的新版 createPlugin * 将插件导出改为默认值

在对导入进行简化和清理后，最终结果可能是这样的：

in @internal/plugin-example
import {
  storageApiRef,
  createPlugin,
  createApiFactory,
  createApiExtension,
} from '@backstage/frontend-plugin-api';
import { workApiRef } from '@internal/plugin-example-react';
import { WorkImpl } from './WorkImpl';

const exampleWorkApi = createApiExtension({
  factory: createApiFactory({
    api: workApiRef,
    deps: { storageApi: storageApiRef },
    factory: ({ storageApi }) => new WorkImpl({ storageApi }),
  }),
});

/** @public */
export default createPlugin({
  id: 'example',
  extensions: [exampleWorkApi],
});

进一步的工作​

由于实用程序编程接口现在已成为完整的扩展，您可能需要更深入地了解它们过去的使用方式，以及新前端系统提供的功能。 例如，您可以考虑增加可配置性或输入到您的应用程序接口，如果这对您当前的应用程序有意义的话。