想问下, vue3 开发的项目,想做一个插件应用中心类似的东西

197 天前
 v2taylor

比如我本地有一个正在运行的 vue 项目,我打开插件应用中心,选择并点击安装就可以获取到插件源码,怎么样可以把这个插件源码打包到我这个正在运行的 vue 项目中,正常使用此插件功能?有没有解决方案,前端小白,请各位大佬赐教解惑

1464 次点击
所在节点    程序员
18 条回复
weixind
197 天前
你的这个“插件”指的是啥?
v2taylor
197 天前
@weixind 就是一个小功能插件,比如统计功能,报表功能啥的,也是用 vue 实现的页面
xjngbla
197 天前
你得制定插件规范
v2taylor
197 天前
@xjngbla 是的,主要是想了解怎么打包插件源码并嵌入到已经正在运行的项目中,我的前端知识面还太欠缺
kumoocat
197 天前
可以看下官方或 vuetify 的这个,动态编译插入
https://github.com/vuejs/repl
https://github.com/vuetifyjs/vue-repl
xjngbla
197 天前
@v2taylor #4 项目起来后就只能用原生了,浏览器没有打包环境,不能打包了,而且你需要一个服务器托管插件
v2taylor
197 天前
@kumoocat 好的,谢谢大佬
v2taylor
197 天前
@xjngbla 嗯,在服务器上打包
chongyuezhu
197 天前
动态运行这种,本质是准备好的插件已经在代码里面了,所谓的安装,无非是代码插拔式开关打开。

另一种思路是,配置的项目是单独的,里面的功能是一个目标项目的容器;然后安装插件的过程是把插件相关代码集成进去,配合一些 hmr 技术,让页面效果实时展现。
v2taylor
197 天前
@chongyuezhu 因为是想要开放一种规范,第三方可以按照规范来开发插件,然后共用,有点类似 vscode 提供的插件功能,各种各样的
pikko
197 天前
低阶:eval()插件代码,提供一些零碎的环境对象属性
高阶:全部代码在一个对象下操作,要求你把所有能触及到的功能在这个对象实现

归根结底还是这个抽象对象你能做多深
油猴基本就是第一种吧
leokun
197 天前
插件就是对系统接口的实现,可能还需要描述文件之类的,这个和 vue3 没什么关系。
首先应该需要把插件的工具链(webpack 或者 rollup)搞好,让开发者可以在仿真的环境中开发插件,并且支持通过你提供的本地编译工具打包上传到应用中心,方便其他用户下载,不要在服务端做编译。
这里比较难做好的是系统接口的设计和工具链,前者一般是通过一个公开的 npm 包来提供帮助函数(或者各种 helper),后者只需要做一次就可以在多个系统里沿用
xhawk
197 天前
我也很期待这个思路怎么做。
SorryChen
197 天前
@v2taylor @xhawk

不知道你是不是 Electron 的 APP 。提供点 Electron 项目的实现思路细节。在学习了 VSCode 之后,我在我的项目 https://github.com/Future-Scholars/paperlib 实现了插件系统:

1. 首先所有的插件都运行在单独的 process 里,可以使用 Electron 的 utilityProcess 。这可以保证你插件崩了,软件不会崩。

2. 因为插件和软件主体,在不同的 process 里,你需要设计实现一个好用的 RPC 。比如我从插件所在的 utility process 想要访问软件主体的一些 services ,你几乎不想每次都单独通过 Electron 自己的通信 ipcMain message port 之类的来分别一一实现。理想的思路是通过基于 ipc ,message port 封装,来在 process 间暴露想要的 API 。

我的实现是,ipc 只负责初始的沟通建立部分,类似于握手吧,交换一个 message port pair 。然后后续的所有通信都通过 message port 。这样写起来比较简单头脑清楚一点。message port 之间,传递的包括,calling 的类别,服务名,函数名,参数等。然后对应 process 处理好得到结果之后,再通过 message port 回复回去结果。请求和回复有一个唯一的 id 进行匹配。细节还是得去看代码。这样就可以实现,你任意跨 process 调用函数,甚至跨 process 的事件监听。

process 间 API 的这个暴露过程本质上就是在创建一个图,图的节点是 process ,边就是是否已经暴露了 API 。因此你可以基于此,写一些代码,在新 process 创立时,请求所有已存在的 process ,向自己暴露 API 。比如你创立插件所在的 utility process 后,首先运行的代码是向 renderer 和 main process 请求向自己暴露 API 。一旦暴露了,这个图里就是三个节点了,也多了两条边。之后,你就可以在插件 process ,使用 const results = await MainAPI.XXX.YYY(...) 类似这样的方式,来和软件主体进行交互了。

建立好这一套机制之后,你就可以给让插件调用你所暴露的 API 了。而且即便插件崩了,也不会影响你的软件主体。

3. 关于插件的加载。插件全都加载到 node vm 里。至于下载和安装卸载等,你可以参考 https://www.npmjs.com/package/live-plugin-manager 。自己实现也不是很麻烦。

4. 你需要设计一个规范,来让插件开发者遵守它开发插件,比如插件的 initialize 过程需要做什么,插件在卸载的时候必须要有对应的 dipose 函数来清理一些不必要的东西。
Dolov
196 天前
我理解的是生成环境的项目想要能够运行一些第三方组件吧,可以试试微前端的思路。我们的产品中也有这块功能,允许第三方开发者上传开发好的微应用、微组件到我们的开发者平台,然后发布到组件市场。可以安装应用或者组件,然后在布局中使用组件。
v2taylor
196 天前
@Dolov 对,是这个意思
Dolov
196 天前
@v2taylor #16 我们产品中有这个功能,我做了两年左右,挺麻烦的。要考虑不同版本的兼容性、运行时 sdk 、开发环境联调工具、性能等等,最难搞的就是运行时的环境隔离了,iframe 模式和微应用模式忽悠长度。还要看产品形态来取舍。
mipawn
196 天前
微前端、远程组件都可以

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1038104

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX