如何在 grafana 数据源插件中使用外部库

Question

如何在 grafana 数据源插件中使用外部库？

我的插件可以工作，但是当我需要安装并保存到 package.json 文件的“mqtt”库时，出现以下错误：

插件错误从http://localhost:3000/public/plugins/myfirstplug/datasource.js加载http://localhost:3000/public/mqtt为“mqtt”时出错

this is what my datasource.js head looks like:

define([
  'mqtt'
  'angular',
  'lodash',
  '../core_module',
  'app/core/config',
],
function (mqtt,angular, _, coreModule, config) {
  'use strict';

正如我所说，package.json 已经包含 mqtt 作为依赖项，我将 mqtt 文件夹放在几乎每个文件夹中，这些文件夹也可以手动用作库文件夹。

如何在 grafana 数据源插件中使用 npm 库以使其正常工作？

提前致谢！

Answer 1

我遇到了同样的问题，包括我的插件的额外依赖项。我使用这个实验性插件作为样板来解决这个问题：

1. 您需要创建一个文件夹：src/external/
2. 将依赖项的已编译单文件 dist 版本添加到此文件夹下，例如src/external/mqtt.js. （实际上即使 Grafana 项目在 git 存储库中也有供应商）

3. 在构建任务中，您需要复制external文件夹下的文件，因此您的文件Gruntfile.js应该如下所示：https ://github.com/NatelEnergy/grafana-plotly-panel/blob/master/Gruntfile.js

   ...
   
   copy: {
     ...
     externals: {
       cwd: 'src',
       expand: true,
       src: ['**/external/*'],
       dest: 'dist'
     }
     ...
   },
   
   ...
   
   grunt.registerTask('default', ['clean', 'copy:src_to_dist', 'copy:pluginDef', 'copy:img_to_dist', 'copy:externals', 'babel']);
   

4. 现在您可以导入外部库：import * as mqtt from './external/mqtt';