如何在grafana datasource-plugin中使用外部库 [英] How to use external libraries in grafana datasource-plugin

问题描述

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

how can I use a external library in a grafana datasource plugin?

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

My plugin works but when i require the "mqtt" library which I have installed and saved to the package.json file I get the following error:

插件错误
加载 http：// localhost：3000 / public / mqtt ，来自 http：// localhost：3000 / public / plugins / myfirstplug / datasource.js

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文件夹放入了每个文件夹都可以也可以手动用作库文件夹。

As I said the package.json already includes mqtt as dependency and ive put the mqtt folder in almost every folder which may be used as library folder manually , too.

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

How can I use a npm library in a grafana datasource plugin so that it works?

提前致谢！

推荐答案

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

I came across the same issue with including additional dependency for my plugin. I used this experimental plugin as boilerplate to tackle this issue:

1. 您需要创建一个文件夹： src / external /


2. 在此文件夹下添加已编译的单个文件dist版本的依赖项，如 src / external / mqtt.js 。 （实际上甚至Grafana项目在git存储库中都有供应商）



3. 在构建任务中，您需要复制外部文件夹下的文件，这样您的 Gruntfile.js 应该是这样的： https： //github.com/NatelEnergy/grafana-plotly-panel/blob/master/Gruntfile.js

1. You need to create a folder: src/external/
2. Add the compiled single file dist versions of your dependency under this folder like src/external/mqtt.js. (Actually even Grafana project has vendors in git repository)

3. In build task, you need to copy the files under your external folder, so your Gruntfile.js should be like this: 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']);

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

这篇关于如何在grafana datasource-plugin中使用外部库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！