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

[v2taylor]

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

[weixind]

你的这个“插件”指的是啥？

[v2taylor]

@weixind 就是一个小功能插件，比如统计功能，报表功能啥的，也是用 vue 实现的页面

[xjngbla]

你得制定插件规范

[v2taylor]

@xjngbla 是的，主要是想了解怎么打包插件源码并嵌入到已经正在运行的项目中，我的前端知识面还太欠缺

[kumoocat]

可以看下官方或 vuetify 的这个，动态编译插入
https://github.com/vuejs/repl
https://github.com/vuetifyjs/vue-repl

[xjngbla]

@v2taylor #4 项目起来后就只能用原生了，浏览器没有打包环境，不能打包了，而且你需要一个服务器托管插件

[v2taylor]

@kumoocat 好的，谢谢大佬

[v2taylor]

@xjngbla 嗯，在服务器上打包

[chongyuezhu]

动态运行这种，本质是准备好的插件已经在代码里面了，所谓的安装，无非是代码插拔式开关打开。

另一种思路是，配置的项目是单独的，里面的功能是一个目标项目的容器；然后安装插件的过程是把插件相关代码集成进去，配合一些 hmr 技术，让页面效果实时展现。

[v2taylor]

@chongyuezhu 因为是想要开放一种规范，第三方可以按照规范来开发插件，然后共用，有点类似 vscode 提供的插件功能，各种各样的

[pikko]

低阶：eval()插件代码，提供一些零碎的环境对象属性
高阶：全部代码在一个对象下操作，要求你把所有能触及到的功能在这个对象实现

归根结底还是这个抽象对象你能做多深
油猴基本就是第一种吧

[leokun]

插件就是对系统接口的实现，可能还需要描述文件之类的，这个和 vue3 没什么关系。
首先应该需要把插件的工具链(webpack 或者 rollup)搞好，让开发者可以在仿真的环境中开发插件，并且支持通过你提供的本地编译工具打包上传到应用中心，方便其他用户下载，不要在服务端做编译。
这里比较难做好的是系统接口的设计和工具链，前者一般是通过一个公开的 npm 包来提供帮助函数(或者各种 helper)，后者只需要做一次就可以在多个系统里沿用

[xhawk]

我也很期待这个思路怎么做。

[SorryChen]

@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]

我理解的是生成环境的项目想要能够运行一些第三方组件吧，可以试试微前端的思路。我们的产品中也有这块功能，允许第三方开发者上传开发好的微应用、微组件到我们的开发者平台，然后发布到组件市场。可以安装应用或者组件，然后在布局中使用组件。

[v2taylor]

@Dolov 对，是这个意思

[Dolov]

@v2taylor #16 我们产品中有这个功能，我做了两年左右，挺麻烦的。要考虑不同版本的兼容性、运行时 sdk 、开发环境联调工具、性能等等，最难搞的就是运行时的环境隔离了，iframe 模式和微应用模式忽悠长度。还要看产品形态来取舍。

[mipawn]

微前端、远程组件都可以