如何用Webpack打包Grafana脚本化仪表盘？排查打包后报错问题

你这明显是踩了Webpack模块作用域和Grafana全局变量的坑！遇到的TypeError: Cannot read property 'rows' of undefined，本质原因是Webpack默认会把代码包裹在独立的模块作用域里，导致Grafana脚本化仪表盘依赖的全局dashboard对象，在打包后的代码里找不到了——毕竟原本的示例脚本是直接在全局作用域下操作dashboard的。

先看你原本的Webpack配置：

const path = require('path'); // webpack.config.js
module.exports = {
 entry: './src/scripted.js',
 output: {
 filename: 'scripted_NEW.js',
 path: path.resolve(__dirname, 'dist'),
 },
 mode: 'production'
};

具体修复方案 #

只需要给Webpack加一个关键配置，让打包后的代码暴露到全局作用域，让Grafana能正常访问到dashboard对象：

1. 在output配置里添加libraryTarget: 'window'，告诉Webpack把打包后的模块挂载到浏览器的window全局对象上，这样脚本里的dashboard就能和Grafana预创建的全局对象关联上。
2. 同时确认你的源脚本scripted.js里是直接操作全局dashboard，不要把它定义成局部变量（比如别写const dashboard = ...，直接用dashboard.rows.push(...)这种写法）。

修改后的Webpack配置如下：

const path = require('path');
module.exports = {
 entry: './src/scripted.js',
 output: {
 filename: 'scripted_NEW.js',
 path: path.resolve(__dirname, 'dist'),
 // 核心配置：将打包结果挂载到全局window对象
 libraryTarget: 'window'
 },
 mode: 'production'
};

这样打包后的脚本就能像原示例一样正常和Grafana的全局dashboard对象交互了。

内容的提问来源于stack exchange，提问作者Thomas