第 2 章 Red Hat Developer Hub 中的第三方插件

先决条件

• 已安装 @red-hat-developer-hub/cli 软件包。使用最新版本(@latest 标签)与最新的功能和修复程序兼容。
• Node.js 和 NPM 已安装并配置。
• 第三方插件与您的 Red Hat Developer Hub 版本兼容。如需更多信息，请参阅 版本兼容性列表。

• 第三方插件在其根目录中必须具有有效的 package.json 文件，其中包含所有必需的元数据和依赖项。

  后端插件

  为确保与动态插件支持兼容并启用它们的用作动态插件，现有后端插件必须与新的 Backstage 后端系统兼容。此外，这些插件必须使用专用的 CLI 命令重建。

  新的 Backstage 后端系统入口点（使用 createBackendPlugin （） 或 createBackendModule （）创建）必须导出为来自主软件包或 alpha 软件包的默认导出（如果插件实例支持仍使用 alpha API 提供）。这不会对插件实例的标准插件开发指南之上添加任何其他要求。

  动态导出机制标识私有依赖项，并在 package.json 文件中设置 bundleDependencies 字段。此导出机制可确保将动态插件软件包作为自包含的软件包发布，其私有依赖项捆绑在私有 node_modules 文件夹中。

  某些插件依赖项需要在派生的软件包中特定处理，例如：

  • 共享依赖关系 由 RHDH 应用程序提供，并列为 package.json 文件中的 对等依赖项，而不是捆绑在动态插件软件包中。例如，默认情况下，所有 @backstage 范围的软件包都将被共享。

    您可以使用 -shared-package 标志指定共享依赖项，这些依赖项应该由 Red Hat Developer Hub 应用程序提供，而不是捆绑在动态插件软件包中。

    要将 @backstage 软件包视为私有，请使用负前缀(!)。例如，当插件依赖于 @backstage 中的软件包时，该软件包不是由 Red Hat Developer Hub 应用程序提供。

  • 嵌入式依赖项 捆绑到动态插件软件包中，它们的依赖项与顶层相同。默认情况下，嵌入了带有 -node 或 -common 后缀的软件包。

    您可以使用-- embed-package 标志指定其他嵌入的软件包。例如，来自同一工作区中的软件包不遵循默认命名约定。

    以下是使用共享和嵌入式软件包导出动态插件的示例：

    带有共享和嵌入式软件包的动态插件导出示例

    npx @red-hat-developer-hub/cli@latest plugin export --shared-package '!/@backstage/plugin-notifications/' --embed-package @backstage/plugin-notifications-backend

    Copy to Clipboard Toggle word wrap

    在上例中：

  • @backstage/plugin-notifications 软件包被视为私有依赖项，并且捆绑在动态插件软件包中，尽管处于 @backstage 范围。
  • @backstage/plugin-notifications-backend 软件包标记为嵌入式依赖项，并捆绑到动态插件软件包中。

  前端插件

  前端插件可以使用 scalprum 进行配置，CLI 可以在导出过程中自动生成。运行以下命令时，生成的默认配置会被记录：

  记录默认配置的命令示例

  npx @red-hat-developer-hub/cli@latest plugin export

  Copy to Clipboard Toggle word wrap

  以下是默认 scalprum 配置示例：

  默认 scalprum 配置

  "scalprum": {
    "name": "<package_name>",  // The Webpack container name matches the NPM package name, with "@" replaced by "." and "/" removed.
    "exposedModules": {
      "PluginRoot": "./src/index.ts"  // The default module name is "PluginRoot" and doesn't need explicit specification in the app-config.yaml file.
    }
  }

  Copy to Clipboard Toggle word wrap

  您可以在 package.json 文件中添加 scalprum 部分。例如：

  scalprum 自定义示例

  "scalprum": {
    "name": "custom-package-name",
    "exposedModules": {
      "FooModuleName": "./src/foo.ts",
      "BarModuleName": "./src/bar.ts"
      // Define multiple modules here, with each exposed as a separate entry point in the Webpack container.
    }
  }

  Copy to Clipboard Toggle word wrap

  动态插件可能需要调整 Developer Hub 需求，如用于挂载点或动态路由的静态 JSX。这些更改是可选的，但可能与静态插件不兼容。

  要包含静态 JSX，请定义一个额外的导出，并将其用作动态插件的 importName。例如：

  静态和动态插件导出示例

  // For a static plugin
  export const EntityTechdocsContent = () => {...}
  
  // For a dynamic plugin
  export const DynamicEntityTechdocsContent = {
    element: EntityTechdocsContent,
    staticJSXContent: (
      <TechDocsAddons>
        <ReportIssue />
      </TechDocsAddons>
    ),
  };

  Copy to Clipboard Toggle word wrap

流程

• 使用 @red-hat-developer-hub/cli 软件包中的 插件 export 命令来导出插件：

  导出第三方插件的命令示例

  npx @red-hat-developer-hub/cli@latest plugin export

  Copy to Clipboard Toggle word wrap

  确保在插件的 JavaScript 软件包的根目录中执行上一命令（包含 package.json 文件）。

  生成的派生软件包将位于 dist-dynamic 子文件夹中。导出的软件包名称由原始插件名称组成，并附加了 -dynamic。

  警告

  派生的动态插件 JavaScript 软件包不得发布到公共 NPM 注册表。有关更合适的打包选项，请参阅 第 2.2 节 “将第三方插件打包并发布为动态插件”。如果需要发布至 NPM 注册表，请使用私有 registry。