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

【问题标题】：How to use external libraries in grafana datasource-plugin如何在 grafana datasource-plugin 中使用外部库
【发布时间】：2016-06-02 14:26:29
【问题描述】：

如何在 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 库以使其正常工作？

提前致谢！

【问题讨论】：

我决定将插件和 npm 模块捆绑到一个 js 中。
哈哈不错的方法，你能给我一个例子吗？将所有依赖项放在一个文件中是否容易？喜欢 mqtt 依赖？
Grafana 使用 SystemJS 作为模块加载器。我成功地使用systemjs-build 进行了捆绑。我稍后会发布一个示例项目。

标签： javascript node.js module npm grafana

【解决方案1】：

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

您需要创建一个文件夹：src/external/
在src/external/mqtt.js这样的文件夹下添加你的依赖项的已编译的单个文件dist版本。（其实Grafana项目在git仓库里也有vendors）

在构建任务中，你需要复制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']);

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

【讨论】：