无需构建工具开发Grafana简单插件及外部JS导入问题

嘿，作为刚接触Grafana插件开发的新手，你的问题其实挺典型的，我来一步步帮你理清：

问题一：无构建工具时的代码存放位置 #

完全可以不用Grunt这类构建工具，毕竟你只是做自用的简单插件。你之前把代码放在data/plugins/myplugin/dist/其实不是最优选择——dist目录一般是构建工具输出产物的地方，对于无需构建的纯手写插件，直接把代码放在插件的根目录（也就是data/plugins/myplugin/）更合适。

具体操作步骤：

• 在data/plugins/myplugin/下创建你的主控制器文件，比如myplugin_ctrl.js
• 确保插件根目录下的plugin.json配置正确，把module字段指向你的主文件，示例配置：

  "module": "myplugin_ctrl.js"
  

这样Grafana启动时就能直接加载这个文件，完全不需要额外的构建步骤。

问题二：导入外部JS库（datamaps）的错误解决 #

你的404错误核心是文件路径配置不对，再加上SystemJS的导入规则需要注意细节，下面是具体的修复方案：

1. 文件存放位置要对应
   把datamaps.js放在插件目录下的libs子文件夹里，也就是data/plugins/myplugin/libs/datamaps.js（如果没有libs文件夹，直接新建一个就行）。

2. 调整导入方式（适配全局类库）
   大部分老JS库（包括datamaps）都是全局变量式的，不是SystemJS兼容的模块，所以你之前直接在System.register的依赖里写./libs/datamaps会出问题。更稳妥的做法是：

   • 在plugin.json里的includes数组中添加这个库的路径，让Grafana在加载你的插件前先加载它：

     "includes": [
       "libs/datamaps.js"
     ]
     

   • 然后在你的myplugin_ctrl.js里，不需要在System.register的依赖列表里声明它，直接使用全局变量（比如new Datamap({...})，具体写法参考datamaps的官方文档）即可。

3. 检查路径拼写一致性
   你的错误信息里显示的是test-panel，但你提到的插件是myplugin，要确保plugin.json里的id字段和你实际的插件目录名完全一致，避免出现路径混淆的情况。

另外补充一点：你参考的时钟插件是基于构建工具开发的，所以它的导入方式是针对构建后的目录结构设计的，而你不用构建工具，所以必须调整成适合纯手写插件的配置方式。

内容的提问来源于stack exchange，提问作者Matteo Bononi 'peorthyr'