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);