跳转到主要内容

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 版本。

info

此动态依赖项链接也适用于 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能够高效地管理并共享各种插件之间的依赖，同时确保在运行时使用共享依赖的正确和兼容版本。