可扩展电子应用程序的架构？

Question

这是一个有点开放的问题，但是，制作一个好的可扩展电子应用程序的好方法是什么？ VSCode、Atom 和许多其他人支持扩展，但他们的代码库太大，我无法理解正在发生的事情。 我对 Jupyterlab 感到非常惊讶，据他们说，它包含一个小核心，其他一切都只是它上面的扩展。 所以我想知道如何构建这些应用程序。

我的具体问题是：

• 是否有创建可扩展架构的最佳实践？
• 电子部分如何“识别”扩展？ 它是如何加载的？ 应该什么时候加载？
• 是否有一个最小的例子来说明如何做到这一点？ 从某种意义上说，提供这两个示例可以回答整个问题：
  • 只在页面的特定空间添加按钮的扩展程序（因此，如何从扩展程序操作 dom）
  • 如何在菜单栏中添加另一个选项（因此，如何与扩展中的电子 API 交互。）

Answer 1

Electron (BYOEF) 没有内置支持

Electron 是 BYOEF（自带扩展框架），这意味着 Electron 中没有对扩展的内置支持（是的，我编造了这个词）。 VS Code 和 Atom 已经在 Electron 之上实现了自己的扩展层。

为了支持扩展，需要实现两个核心方面：

1. 一个 API，它定义了允许扩展执行的所有操作，以及扩展可以挂钩的所有事件。
2. 用于打包、分发、选择和安装扩展的系统。

VS Code 如何处理扩展

既然你提到了 VS Code，那么让我们仔细看看它是如何实现扩展的（这很可能被认为是可扩展架构事实上的最佳实践）。

扩展处理源代码

您提到尝试查看源代码。 正如您提到的，VS Code 的代码库很大，但与扩展相关的最重要的代码可以在src/vs/workbench/services/extensions/electron-browser文件夹中找到。

基本扩展格式

VS Code 将扩展作为npm模块分发。 这允许每个扩展都依赖于其他 npm 模块，并允许 VS Code 轻松更新扩展（每次打开时都会这样做）。

扩展安装生命周期

当您选择安装扩展时，它会从VS Code 的 npm 存储库下载。 安装了扩展的依赖项（通常会在安装 npm 包时自动发生）。 该扩展导出了一个activate函数，在完全安装扩展后由 VS Code 调用。

它还导出了一个deactivate函数，以便可以干净地将其删除。

VS Code 的 API

VS Code 公开了一个用于扩展的 API 。 他们可以订阅事件来监听它们、调用公开的 API 函数、 注册新的提供者或注册新命令以添加新功能。

实现请求的功能

您请求的示例实际上取决于您要尝试做什么以及您想如何做。

要添加按钮，您的主页必须查找已注册的按钮并将它们包含在页面上。 在 VS Code 的做事方式中，每个扩展都会在activate()函数中注册他们的按钮，如果他们想这样做的话。

类似地，要在菜单栏中添加一个选项，您的 Electron 应用程序的菜单栏必须查找任何已注册的菜单扩展并用它们填充菜单栏。 同样，扩展从不与 Electron API 交互，只与应用程序的 API 交互。 您需要明确定义一个 API 并使扩展可以访问它（或者只是让整个 Electron API 可访问，但这会导致大混乱）。