Grafana前端源码解读 - 插件加载

本篇向大家介绍Grafana里的插件是如何加载到页面上的

Grafana的插件分为两种：

1. 内置插件。就是Grafana源码里自带的，不需要额外安装就可以用。
2. 第三方插件。需要额外安装才可以使用。

内置插件加载

源码这里列举了所有的内置插件(有注释)： github.com/conanjunn/g…

具体的加载逻辑在(有注释)： github.com/conanjunn/g…

  const builtIn = builtInPlugins[path];
  // 内置插件直接加载
  if (builtIn) {
    // for handling dynamic imports
    if (typeof builtIn === 'function') {
      return await builtIn();
    } else {
      return builtIn;
    }
  }

可见内置插件的加载逻辑很简单，用得就是webpack的动态import，按需加载。

第三方插件

第三方插件安装完成后是通过一个绝对路径去加载的，如果没有改过配置文件的话一般长这样：

https://[你的grafana domain]/public/plugins/[插件名称]/module.js?_cache=[插件版本]

Grafana加载这种决定路径下的静态文件是通过systemjs来实现的。如果你没有用过 systemjs也没关系，就把它当做是动态Import的一种Polyfill就可以。

具体的加载逻辑还是在(有注释)： github.com/conanjunn/g…

添加的一些systemjsHooks(有注释)： github.com/conanjunn/g…