Grafana，使用外部库开发插件答案

【问题标题】：Grafana, develop plugin using an external libraryGrafana，使用外部库开发插件
【发布时间】：2018-07-08 02:37:02
【问题描述】：

大家好。我正在尝试为 Grafana 开发一个简单的插件。我已经成功地导入了外部库，现在我对“使用它”感到震惊。

这是我在 domap_ctrl.js 中导入插件的方式：

System.register(['app/plugins/sdk', 'lodash','./datamaps'], function (_export, _context) {
  var PanelCtrl, _, _createClass, panelDefaults, DoMapCtrl, Datamap;

然后我想触发数据映射：

_createClass(DoMapCtrl, [
            {
              key: 'updateDoMap',
              value: function updateDoMap() {
                console.log("update: ",this.panel.foo);
                if(document.getElementById('container')){
                    new Datamap({
                      element: document.getElementById("basic")
                    });
                }
                this.nextTickPromise = this.$timeout(this.updateDoMap.bind(this), 1000);
              }
            },
            {
          key: 'onRender',
          value: function onRender() {
            console.log("onRender",)
          }
        }
        ]);

但在将面板添加到仪表板时出现此错误：

TypeError: Datamap is not a constructor
    at DoMapCtrl.updateDoMap (domap_ctrl.js:92)
    at angular.js:20440
    at i (angular.js:6362)
    at angular.js:6642
(anonymous) @ angular.js:14700
(anonymous) @ angular.js:11142
(anonymous) @ angular.js:20443
i @ angular.js:6362
(anonymous) @ angular.js:6642
setTimeout (async)
c.defer @ angular.js:6640
o @ angular.js:20438
updateDoMap @ domap_ctrl.js:96
DoMapCtrl @ domap_ctrl.js:82
s @ angular.js:5040
d.instance @ angular.js:11000
f @ angular.js:9852
s @ angular.js:9174
(anonymous) @ angular.js:9039
v @ module.js:14
y @ module.js:38
(anonymous) @ module.js:44
Promise resolved (async)
link @ module.js:43
(anonymous) @ angular.js:1385
Ae @ angular.js:10545
f @ angular.js:9934
s @ angular.js:9174
f @ angular.js:9928
s @ angular.js:9174
(anonymous) @ angular.js:9039
(anonymous) @ angular.js:9430
r @ angular.js:9217
h @ angular.js:9984
(anonymous) @ angular.js:31499
r @ angular.js:18123
$digest @ angular.js:18261
$apply @ angular.js:18531
(anonymous) @ angular.js:27346
dispatch @ jquery.js:5206
g.handle @ jquery.js:5014
12:41:12.796 angular.js:14700 TypeError: Datamap is not a constructor
    at DoMapCtrl.updateDoMap (domap_ctrl.js:92)
    at angular.js:20440
    at i (angular.js:6362)
    at angular.js:6642 "Possibly unhandled rejection: {}"

我该如何解决？提前感谢您的帮助。

【问题讨论】：

为什么不在源文件中使用打字稿等使用import * as Datamap from './datamaps'？

标签： javascript plugins grafana

【解决方案1】：

即使不建议直接在 dist 文件夹中编辑 Grafana 插件（或不从 Typescript 转译）...

要导入您的库，您还需要修改提供依赖项注入的 setters 函数：

return {
    setters: [
    function (_lodash) {
        // example for Lodash library
        _ = _lodash.default;
    }, function (_moment) {
        // example for Moment.js library
        moment = _moment.default;
    }, function (datamap) {
        // your library
        Datamap = datamap;
    }],
    ...

【讨论】：