应用程序实例

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

应用程序实例

应用程序实例是创建前端应用程序的主要入口，它本身并不做什么，而是负责将系统其他部分提供的功能连接起来。

下面是一个如何创建和渲染应用程序实例的简单示例：

import ReactDOM from 'react-dom/client';
import { createApp } from '@backstage/frontend-app-api';

// Create your app instance
const app = createApp({
  // Features such as plugins can be installed explicitly, but we will explore other options later on
  features: [catalogPlugin],
});

// This creates a React element that renders the entire app
const root = app.createRoot();

// Just like any other React we need a root element. No server side rendering is used.
const rootEl = document.getElementById('root')!;

ReactDOM.createRoot(rootEl).render(app);

我们称之为createApp来创建一个新的应用程序实例，它负责将我们为应用程序提供的所有功能连接在一起。它还提供了一组内置的扩展帮助建立应用程序的基础，以及许多其他系统的默认设置，如实用程序应用编程接口不过，在创建应用程序时并没有完成真正的工作，所有工作都将推迟到渲染从app.createRoot().

在创建应用程序时，您可以明确安装功能，不过这些功能通常会被自动发现，我们稍后将对此进行探讨。不过，这些功能通过提供以下功能来构建应用程序的实际功能扩展应用程序将这些扩展连接成一个树形结构，即应用程序扩展树。树中的每个节点从其子节点接收数据，并将数据传递给其父节点。下图展示了一个小型应用程序扩展树的形状。

frontend system app structure diagram

树中的每个节点都是一个扩展，有一个父节点和子节点。彩色图形代表扩展数据的输入和输出，每种颜色代表一种独特的数据类型。可以看到，既有父节点忽略数据输出的扩展，也有接受输入但没有任何子节点的扩展。在创建扩展时，有几种不同的工具可供您使用，让您定义输入和输出的不同要求。扩展节。

扩展之间共享的一种常见数据类型是 React 元素和组件。这些元素和组件又可以在各自的 React 组件中相互呈现，最终形成一棵由 React 组件组成的平行树，其形状与应用程序扩展树相似。在应用程序扩展树的顶端有一个内置的根扩展，除其他外，它还输出一个 React 元素。该元素最终也成为平行 React 树的根，并由以下方法返回的 React 元素呈现app.createRoot().

特征发现

应用程序功能发现可让您自动发现并安装应用程序中由依赖项提供的功能。实际上，这意味着您无需手动import代码中的功能，但只要您将它们作为依赖项添加到您的package.json.

由于特征发现需要与编译过程交互，因此只有在使用@backstage/cli它通过扫描应用程序软件包来查找兼容的依赖项，然后将这些依赖项作为应用程序编译包的一部分，从而与 WebPack 编译过程挂钩。

由于@backstage/cli是一个比新前端系统更稳定的组件，功能发现目前被标记为 CLI 的实验性功能，需要手动启用。要启用它，请将以下配置添加到您的app-config.yaml:

app:
  experimental:
    packages: all

如果不希望这样，可以使用包含或排除过滤器来缩小软件包的范围：

app:
  experimental:
    packages:
      # Only the following packages will be included
      include:
        - '@backstage/plugin-catalog'
        - '@backstage/plugin-scaffolder'
---
app:
  experimental:
    packages:
      # All but the following package will be included
      exclude:
        - '@backstage/plugin-catalog'

请注意，您不需要手动排除在代码中明确导入的软件包，因为插件实例会被应用程序重复。您永远不会安装重复的插件，除非它们实际上是两个不同 ID 的插件实例。

应用程序实例​

特征发现​

应用程序实例

特征发现