跳到主要内容

Grafana 插件中的前端 NPM 依赖项

Grafana 中的前端插件有其自己独特的依赖项，以及在运行时与 Grafana 应用程序共享的依赖项。本文档重点介绍如何处理这些共享依赖项，特别是 @grafana npm 包。

重要的是要理解，虽然插件在其 package.json 文件中指定了这些依赖项的预期版本，但它们在运行时会动态链接到 Grafana 版本。

动态依赖项链接​

插件 package.json 可能会引用特定版本的 @grafana npm 包，例如 @grafana/ui: 9.5.1。在开发环境（例如开发人员 IDE 或运行单元测试时）中，将使用此版本的 @grafana/ui。

但是，当插件在 Grafana 实例中安装和执行时，它会继承 Grafana 应用程序正在使用的 @grafana 包的版本。例如，如果 Grafana 版本为 10.0.0，则插件使用来自 Grafana 应用程序的共享 @grafana 依赖项的 10.0.0 版本。

信息

这种动态依赖项链接也适用于 create-plugin 提供的 Docker 开发环境。当插件在 Grafana 内部运行时，它将继承来自 Grafana 应用程序的 @grafana 依赖项的版本。

依赖项共享机制​

为了促进这种动态依赖项链接，Grafana 采用 SystemJS 来加载前端插件代码，并与插件共享 Grafana 应用程序的一些 npm 依赖项。

Grafana 出于以下两个原因之一决定共享依赖项

  • 单例依赖项要求： 在某些情况下，运行时只能存在一个依赖项实例。
  • 性能优化： 共享依赖项可以提高性能，尤其是在处理大型依赖项代码库时。

共享依赖项的要求​

为了共享依赖项，Grafana 定义了两个关键组件

  • SystemJS 在 Grafana 中的导入映射： 依赖项必须列在 Grafana 应用程序的 SystemJS 导入映射中。
  • 插件构建工具配置： 依赖项必须在插件的构建工具配置中外部化，这主要使用 Webpack 完成。
危险

不支持自定义构建工具配置以更改外部依赖项，并且很可能导致插件加载失败或错误。

编译和运行时​

当 Grafana 应用程序在前台加载时，SystemJS 会注册在导入映射中找到的所有共享依赖项。当前端插件代码被编译时，Grafana 确保外部化的依赖项存在于插件的运行时环境的范围内。

当用户导航到需要特定插件的 Grafana 页面时，会发生以下步骤

  1. SystemJS 延迟加载 插件的 module.js 文件。
  2. SystemJS 实例化 module.js 文件中的代码，确保在执行代码之前，将其任何共享依赖项与插件中的外部依赖项引用链接起来。

此过程使 Grafana 能够有效地管理和共享各种插件之间的依赖项，同时确保在运行时使用正确且兼容版本的共享依赖项。