Superset 二次开发之自定义Viz Plugins(Hello World v2)

?

环境：

• Node.js 16
• npm 7 or 8
• 安装webpack

全局安装 npm install webpack -g

• 安装eslint

superset-frontend> npm install eslint

1.Yeoman 生成器

全局安装Yo>? ?npm i -g yo

2.进入/superset-frontend/packages/generator-superset目录

npm?i &&?npmlink

3.新建图表插件

• superset-frontend目录下，新建文件夹temp ，新建superset-plugin-chart-hello-world

mkdir /superset-frontend/temp/superset-plugin-chart-hello-world

cd /superset-frontend/temp/superset-plugin-chart-hello-world

4.初始化插件?

> yo? 然后一步一步回车即可，

5.开始build，执行

npm i --force

npm run build

6.向superset添加图表，执行（链接到已创建的图表）

• 进入根目录/superset-frontend

superset-frontend> npm i -S temp\superset-plugin-chart-hello-world

• superset-frontend/src/visualizations/presets/MainPreset.js

import { SupersetPluginChartHelloWorld } from 'superset-plugin-chart-hello-world';
new?SupersetPluginChartHelloWorld().configure({?key:?'ext-hello-world'?}),

7.运行

• 前端

superset-frontend>npm?run dev-server

• 后台

superset>?set FLASK_APP=superset

superset>?superset init

superset>?superset run -p 8088 --with-threads --reload --debugger

效果：

? ??

?

异常信息：

1.Error? ?Current environment doesn't provides some necessary feature this generator needs.

解决方案：

superset-frontend>?cnpm install

运行yo 命令 显示 Available 说明可以进行下一步操作了

?2. 'BABEL_OUTPUT' 不是内部或外部命令，也不是可运行的程序或批处理文件

解决方案:

修改superset-plugin-chart-hello-world/package.json

build-esm 和 dev 分别添加set?

?3. Please run npx update-browserlist-db@latest

解决方案：

superset-frontend>npx update-browserlist-db@latest

4. Module not found:Error Can't resolve './locale'? （此异常或导致无法进入welcome页面）

?

解决方案：

修改 moment-with-locales.js 文件

aliasedRequire('./locale/'?+ name); 改为?aliasedRequire('moment/locale/'?+ name);