如何在grafana datasource-plugin中使用外部库

Question

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

我的插件有效，但当我需要安装并保存到package.json文件的“mqtt”库时，我收到以下错误：

插件错误 从http://localhost:3000/public/mqtt

加载http://localhost:3000/public/plugins/myfirstplug/datasource.js为“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

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

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

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';