V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
v2taylor
V2EX  ›  程序员

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

  •  
  •   v2taylor · 75 天前 · 1306 次点击
    这是一个创建于 75 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    归根结底还是这个抽象对象你能做多深
    油猴基本就是第一种吧
    leokun
        12
    leokun  
       75 天前
    插件就是对系统接口的实现,可能还需要描述文件之类的,这个和 vue3 没什么关系。
    首先应该需要把插件的工具链(webpack 或者 rollup)搞好,让开发者可以在仿真的环境中开发插件,并且支持通过你提供的本地编译工具打包上传到应用中心,方便其他用户下载,不要在服务端做编译。
    这里比较难做好的是系统接口的设计和工具链,前者一般是通过一个公开的 npm 包来提供帮助函数(或者各种 helper),后者只需要做一次就可以在多个系统里沿用
    xhawk
        13
    xhawk  
       75 天前 via Android
    我也很期待这个思路怎么做。
    SorryChen
        14
    SorryChen  
       75 天前
    @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
        15
    Dolov  
       75 天前
    我理解的是生成环境的项目想要能够运行一些第三方组件吧,可以试试微前端的思路。我们的产品中也有这块功能,允许第三方开发者上传开发好的微应用、微组件到我们的开发者平台,然后发布到组件市场。可以安装应用或者组件,然后在布局中使用组件。
    v2taylor
        16
    v2taylor  
    OP
       75 天前
    @Dolov 对,是这个意思
    Dolov
        17
    Dolov  
       75 天前
    @v2taylor #16 我们产品中有这个功能,我做了两年左右,挺麻烦的。要考虑不同版本的兼容性、运行时 sdk 、开发环境联调工具、性能等等,最难搞的就是运行时的环境隔离了,iframe 模式和微应用模式忽悠长度。还要看产品形态来取舍。
    mipawn
        18
    mipawn  
       75 天前
    微前端、远程组件都可以
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2424 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 06:35 · PVG 14:35 · LAX 23:35 · JFK 02:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.