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 页面时，会发生以下步骤
- SystemJS延迟加载插件的
module.js文件。 - SystemJS 实例化
module.js文件中的代码，确保它将任何共享依赖项与插件中的外部依赖项引用链接起来，然后再执行代码。
此过程使 Grafana 能够有效地管理和共享不同插件之间的依赖项，同时确保在运行时使用正确且兼容版本的共享依赖项。