将charts作为自定义插件

[MybeautifulSunShine]

1参考此文章第一种方式
https://mp.weixin.qq.com/s/nYMAaiT97NPkm71FpW8LSw

2下载下来仓库中的某个插件

3 然后写入到本地

4在index.ts中追加

5 但是报错 如下
问我这样的思路能成功运行出插件来吗? 改错误是由什么导致的呢?还是本来就不是这样的开发方式

[Cuiyansong]

“插件化”的思路是不需要以这种hack到代码中的方式集成的。
你可以惨遭Readme中的过程，将以xxxx.iife.js的文件拷贝到服务端对应的目录下或者如果以本地调试的方式启动，直接拷贝到public文件夹custom-plugin-charts文件夹下面即可。

[MybeautifulSunShine]

幸苦了，没想到这么晚还能回复，我本来是想自定义一个插件，但是我纯后端，想着能不能参考写好的插件，放到目录中去，然后修修改改，૧(●´৺`●)૭，跑一跑熟悉一下语法和运行方式，所以才这样做的，请问我这种思路或者方案可行吗？

…

---- 回复的原邮件 ---- | 发件人 | Stephen ***@***.***> | | 日期 | 2022年07月29日 22:07 | | 收件人 | ***@***.***> | | 抄送至 | ***@***.******@***.***> | | 主题 | Re: [running-elephant/datart-extension-charts] 将charts作为自定义插件 (Issue #17) | “插件化”的思路是不需要以这种hack到代码中的方式集成的。 你可以惨遭Readme中的过程，将以xxxx.iife.js的文件拷贝到服务端对应的目录下或者如果以本地调试的方式启动，直接拷贝到public文件夹custom-plugin-charts文件夹下面即可。 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[Cuiyansong]

幸苦了，没想到这么晚还能回复

hmmmm, 因为你是第一个“正式提问的”，所以应该有VIP待遇。

想着能不能参考写好的插件，放到目录中去

可行，可直接将我上面说的将xxx.iife.js 文件放入指定目录，然后重新登陆用户即可。插件化的目的就是尽量屏蔽技术栈差异（Plugin的方式）以及提供更便捷的图表绘制工具函数（DHelper）。
如果作为一个后端开发的同学来说，制作插件图表还是要有Javascript基础的，至少是了解纯Javascript/Typescript/ES6基本语法规则，建议直接从Typescript入手。

放到目录中去，然后修修改改，૧(●´৺`●)૭，跑一跑熟悉一下语法和运行方式

如果想学习并调试插件图表的话，建议下载源码，启动后端代码，然后，本地启动前端项目（先下载安装npm包，然后在craco.config文件中修改后端服务API路径，如192.168.0.1）。之后能正常登陆，即说明本地调试部署成功。
然后，将xxx.iife.js文件拷贝到 public/custom-plugin-charts文件夹下面，登陆系统，创建图表即可看见新增加的插件图表。
最后，直接修改xxx.iife.js里面的代码即可，修改之后前端会自动更新（前端的hot loader插件完成此任务）

[MybeautifulSunShine]

hmmmm, 因为你是第一个“正式提问的”，所以应该有VIP待遇。

哈哈哈是吗?那还感到挺荣幸的

“插件化”的思路是不需要以这种hack到代码中的方式集成的。

我这样想的,是因为下载下来的文件目录跟公众号看的那个<手把手教你写个插件>的那个文章目录一样 所以在想这样能不能修改一些里面的样式什么的 ,看来只能把下载下来的 dist目录中的xxx.iife.js 文件复制进去后,格式化完就可以吧?那CSS之类的,与数据联动的逻辑都在这里面吗?

然后，将xxx.iife.js文件拷贝到 public/custom-plugin-charts文件夹下面
我就是这样的启动方式,与调试方式 现在有点眉目了谢谢指定!!!

[Cuiyansong]

我这样想的,是因为下载下来的文件目录跟公众号看的那个<手把手教你写个插件>的那个文章目录一样 所以在想这样能不能修改一些里面的样式什么的 ,看来只能把下载下来的 dist目录中的xxx.iife.js 文件复制进去后,格式化完就可以吧?那CSS之类的,与数据联动的逻辑都在这里面吗?

公众号以及教程里面一部分插件图表是以代码二开的形式写的（例如直接用React写一个组件），不符合插件模式（通过插件仓库打包的标准格式）。
对于插件中的css资源，可以在插件的dependency属性里面添加，可以参照示例。
对于插件联动的支持，目前还不支持插件图表的联动和跳转，这个后期考虑出个教程，使用Datart官方提供的函数在插件图表中，即可支持。

[xiaoqufengdi]

有个问题，插件工程打包后xxx.iife.js是压缩过的代码，没办法在datart里面源代码调试？

[Cuiyansong]

临时可以修改 rollup.config.js 文件中的terser选项，可以参考Terser插件的配置参数