javascript - 如何在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';