Grafana中引用第三方框架报error_loadign

原创于 2022-03-04 11:07:58 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

文章标签：

在开发Grafana插件时遇到由于引用AntV导致的ES6不兼容错误，表现为yranwatch页面加载失败。解决方法是在项目根目录下创建webpack.config.js，引入terser-webpack-plugin，配置将ES6代码转换为ES5，以确保Grafana支持。通过这个配置，Grafana能够正确识别和处理转换后的插件代码。

最近在开发Grafana插件时遇到了一个问题，引用AntV之后 yran watch页面上会报error_loading

使用 yarn build之后就不会，后面发现是Grafana不支持es6，被引入的插件在watch时并没有转成es5导致。

解决方法：

在项目根目录下新建webpack.config.js文件，添加terser-webpack-plugin插件；

webpack.config.js：

const TerserPlugin = require("terser-webpack-plugin")

module.exports.getWebpackConfig = (config, options) => {
    const compressOptions = { drop_console: false, drop_debugger: false };
    return {
    ...config,
        plugins: [...config.plugins, new TerserPlugin({ terserOptions: { compress: compressOptions } }),],
    }
};

Grafana中使用webpack必须在项目跟目录下新建webpack.config.js文件，且必须导出getWebpackConfig模块才能识别