3.4. 创建 TechDocs 附加组件

步骤

1. 在终端中，导航到您要创建新插件的存储库的根文件夹。

2. 要创建新的前端插件，请运行以下命令：

   yarn new

   Copy to Clipboard Toggle word wrap

   输出示例

   ? What do you want to create? plugin - A new frontend plugin
   ? Enter the ID of the plugin [required]

   Copy to Clipboard Toggle word wrap

3. 在终端提示符中，输入新插件的名称。例如：

   ? Enter the ID of the plugin [required] <new_plugin_for_techdocs_add-on>

   Copy to Clipboard Toggle word wrap

   输出示例

   Successfully created plugin

   Copy to Clipboard Toggle word wrap

   结果

   在 plugins 目录中，会自动生成带有相同名称的子目录。目录包含您需要配置以创建新插件的所有文件。

4. 在终端中，进入您的新插件目录。例如：

   cd plugins/<new_techdocs_add-on_directory>

   Copy to Clipboard Toggle word wrap

5. 添加'@backstage/plugin-wagon-react' 软件包以获取 TechDocs 附加组件的 frontend 工具。例如：

   yarn add @backstage/plugin-techdocs-react

   Copy to Clipboard Toggle word wrap
6. 在包含自定义 TechDocs 附加组件组件的目录中，删除附加组件不需要的所有默认文件或文件组件，如 index.tsx 和 plugins.ts 文件的 routes.ts 文件或组件。

7. 在 plugins.ts 文件中，添加以下代码：

   import { createPlugin } from '@backstage/core-plugin-api';
   import { createTechDocsAddonExtension } from '@backstage/plugin-techdocs-react';
   
   export const <new_plugin_for_techdocs_add-on> = createPlugin({
     id: '<new_techdocs_add-on>',
    });
   
    /*
    *
    * @public
    */
   export const <new_techdocs_add-on> = <new_plugin_for_techdocs_add-on>.provide(
    createTechDocsAddonExtension<_<new_techdocs_addon_props>_>({
       name: '<new_techdocs_add-on>',
       location: TechDocsAddonLocations.Content,
       component: <new_techdocs_add-on_component>,
     }),
   );

   Copy to Clipboard Toggle word wrap

   其中

   <new_plugin_for_techdocs_add-on>

   指定将 TechDocs 附加组件导入到 Red Hat Developer Hub 实例的新插件。

   <new_techdocs_add-on>

   指定您要创建的自定义 TechDocs 附加组件。

   <new_techdocs_addon_props> (Optional)

   指定新 TechDocs 附加组件的 props，如 < new_wagon_add-on>.tsx 文件（如果适用）。

   <new_techdocs_add-on_component>

   指定您要创建的自定义 TechDocs 附加组件的 React 组件。您将在后续步骤中在 .tsx 文件中创建此组件。

8. 在 index.ts 文件中，通过添加以下代码导出您要创建的自定义 TechDocs 附加组件：

   export { <new_plugin_for_techdocs_add-on>, <new_techdocs_add-on> } from './plugin';

   Copy to Clipboard Toggle word wrap
9. 创建一个新的 &lt ;new_wagon_add-on > .tsx 文件，并为新的 TechDocs 附加组件组件添加代码。

10. 创建一个新的 index.tsx 文件，并通过添加以下代码来导出新的 TechDocs 附加组件组件：

    export { <new_techdocs_add-on>, type <new_techdocs_addon_props>} from './<new_techdocs_add-on_directory>'

    Copy to Clipboard Toggle word wrap

    其中

    <new_techdocs_addon_props> (Optional)

    指定新 TechDocs 附加组件的 props，如 < new_wagon_add-on>.tsx 文件（如果适用）。

11. 在 plugins.ts 文件中，导入新的 TechDocs 附加组件组件。
12. 按照安装和配置 TechDocs 附加组件中的步骤 安装和配置新的 TechDocs 附加组件

验证

1. 重启 RHDH 应用程序，并验证插件是否已成功激活和配置。
2. 验证应用程序日志以确认，并确保插件按预期工作。