部署二次开发环境
1. 安装前准备
1.1. 部署扩展包开发环境
本次环境配置,只需在 “扩展包开发环境” 的基础上增加二开扩展包环境即可。因此需要用户预先部署好 “扩展包开发环境” ,部署方式请参考 扩展包开发环境部署。
如已部署 “扩展包开发环境” ,此步骤可跳过
1.2. 附件下载
文件 | 下载链接 |
---|---|
二开扩展包 | webpack.zip |
build.xml | build.xml |
2. 添加webpack环境
将二开扩展包环境 “wepbackZip” 解压缩放到 src 目录下,与 web 同级。
3. 修改build.xml文件
可参考附件下载中的build.xml修改以下内容。
① 通过clean命令中添加删除webpack编译内容;
<delete dir="${basedir}/src/web/vision/dist" />
② 通过jar命令添加排除webpack路径下的内容;
<exclude name="**/webpack/" />
③ 添加webpack命令;
<target name="webpack" description="webpack npm build"> <exec executable="cmd.exe"> <arg line="/c "cd ${basedir}/src/webpack && npm run build " "/> </exec> </target>
④ 修改dist命令编译部分如下,添加webpack相关的清除及编译;
<parallel failonany="true"> <echo>==============</echo> <antcall target="clean" /> <antcall target="webpack" /> <echo>webpack npm build</echo> <echo>${ant.project.name}: dist</echo> <echo>==============</echo> <antcall target="compile" /> </parallel>
⑤ 修改打包名称;
<project name="barZone" default="dist"> <property name="ext_name" value="barZone" /> </project>
效果如下:
入门示例
1. 添加仪表盘组件
1.1. 需求场景
在仪表盘组件工具中,新增一个组件,组件中显示一个简单的文字 “hello”。
1.2. 预期效果
1.3. 操作步骤
(1)在根目录下的 “SmartbiPluginsApp/webpack/src/plugins/addExtenders” 下创建组件文件夹,添加文件夹 “HelloView” 并在文件夹下创建两个文件:“index.js”、“HelloView.vue”
(2)在 “index.js” 文件中实现 “provideMetaInfo” 方法,返回的是一个对象。
import HelloView from './HelloView.vue' const provideMetaInfo = () => { return { name: 'Hello', // 组件名称 type: 'hello', // 组件类型 svg: 'db-left-widget__chart-pie', icon: 'sx-icon-widget-chart icon-16', entry: { // 组件入口,可以从仪表盘工具栏中直接添加(不配置就只能通过智能配图切换出来) title: 'Hello入口', // 在组件入口中显示的名称,不填显示组件名称 order: 15, // 组件入口中的顺序,默认放在最后 group: { // 分组,不配置放到默认分组 id: 'basic' // 分组标识 } }, // 组件文件 portletImplement:HelloView } } export default { provideMetaInfo }
(3)在 “HelloView.vue” 中编写自己的业务代码
<template> <div>hello</div> </template> <script> export default { name: 'hello' } </script>
2. 扩展仪表盘示例
2.1. 需求场景
在仪表盘预览菜单栏,点击工具栏弹出hello。
2.2. 预期效果
2.3. 操作步骤
(1)在根目录下的 “SmartbiPluginsApp/webpack/src/plugins/modifyExtenders” 下创建组件文件夹。下面以仪表盘预览菜单栏为例,添加文件夹“sxExtension”,并在文件夹下创建两个文件:“index.js”、“Extender.js”。
(2)在 “index.js” 文件中实现 “provdieMetaInfo” 方法,Extender导出的是一个 EditorMetaInfo 对象。
import Extender from './Extender1' const provideMetaInfo = { // 二开文件 implement: Extender1 } export default { provideMetaInfo }
(3)在 “Extender.js” 文件中, 实例化二次接口仪表盘菜单初始化事件(预览模式下)onFlexMenuInit,供仪表盘接口对象 iDashboard 和仪表盘菜单接口对象 iFlexMenu。
- Extender.js 核心代码如下:
const extendObject = { dashboard: { onFlexMenuInit (iDashboard, iFlexMenu) { iFlexMenu.addItem({ id: 'Custom', icon: 'sx-icon-menu', label: 'PageInfo', color: 'rgba(97, 133, 199, 0.95)', handler () { console.log('hello') } }) } }} export default extendObject
参考以上步骤进行就可以完成一个简单的组件添加了。