环境:
- 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-worldcd /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);