【仪表板-插件开发】可视化插件开发中引用js库

收藏

本帖最后由 James.Lv 于 2023-1-5 18:08 编辑

主要介绍一下在可视化插件中的一些经验，给大家分享一点经验。

在开发中，我们看到wyn开发的主要的代码开发代码中，如引用npm包的js。

如jquery，直接用 import $ from 'jquery';来引入，那么如果要引用一个百度地图的有引用对象的js呢？必须要基于动态引入js，传递token等。

第一步：

在 webpack.config.js 的 externals 节点中增加对应的js对象。

image.png372276915.png

第二步：添加外部js引用

在 visual.json 的 externalJs 节点中添加所要引用的js ，注意其中token引用的部分。

image.png227408446.png

在configuration 节点中增加自定义属性，开发完成之后，可以在插件中配置。

image.png907973022.png

到时候发布后，可以在这里自定义配置的一些参数。

image.png489349975.png

第三步：在visual.ts文件中，引用如

// @ts-ignore

import AMap from 'AMap';

image.png972657775.png

在使用中就可以正常引用了。

image.png581407165.png

到这里，我们就可以将外部js库引入到我们的项目中，愉快的使用起来吧。

回复 · 746243

对于小白来说直接看不懂，有个demo就完美了

Sam.Wang · Sam.Wang

746243 发表于 2022-3-28 13:43
对于小白来说直接看不懂，有个demo就完美了

源码发给您，您可以看着代码进一步学习。插件开发的学习过程中如果遇到问题可以查看我们的帮助文档
仪表板可视化插件

Bella.Yuan · Bella.Yuan

Sam.Wang 发表于 2022-3-28 14:05
源码发给您，您可以看着代码进一步学习。插件开发的学习过程中如果遇到问题可以查看我们的帮助文档
仪表 ...

		自动登录	找回密码
密码			立即注册

[仪表板] 【仪表板-插件开发】可视化插件开发中引用js库