javascript - 可扩展 Electron 应用程序的架构？

Question

这是一个有点开放式的问题，但是，制作良好的可扩展 Electron 应用程序的好方法是什么？ VSCode、Atom 和许多其他工具都支持扩展，但它们的代码库太大，我无法理解发生了什么。我对 Jupyterlab 感到非常惊讶，根据他们的说法，它由一个小核心组成，其他所有内容都只是其之上的扩展。所以我想知道如何构建这些应用程序。

我的具体问题是:

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

Answer 1

Electron 中没有内置支持(BYOEF)

Electron 是 BYOEF(自带扩展框架)，这意味着 Electron 中没有对扩展的内置支持(是的，我创造了这个术语)。 VS Code 和 Atom 在 Electron 之上实现了自己的扩展层。

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

1. 定义允许扩展程序执行的所有操作以及扩展程序可以 Hook 的所有事件的 API。
2. 用于打包、分发、选择和安装扩展的系统。

VS Code 如何处理扩展

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

扩展处理源代码

您提到尝试查看源代码。正如您提到的，VS Code 的代码库非常庞大，但与扩展相关的最重要的代码 can be found in the src/vs/workbench/services/extensions/electron-browser folder .

基本扩展格式

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

扩展安装生命周期

当您选择安装扩展时，将从 VS Code's npm repository 下载该扩展。 。扩展的依赖项已安装(安装 npm 包时通常会自动发生)。该扩展导出一个 activate 函数，该函数在扩展完全安装后由 VS Code 调用。

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

VS Code 的 API

VS Code 公开 an API for extensions 。他们可以subscribe事件来监听它们，调用公开的 API 函数，register new providers或注册新命令以添加新功能。

实现请求的功能

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

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

类似地，要在菜单栏中添加选项，您的 Electron 应用程序的菜单栏必须查找任何注册的菜单扩展并使用它们填充菜单栏。同样，扩展从不与 Electron API 交互，仅与应用程序的 API 交互。您需要显式定义一个 API 并使其可供扩展访问(或者只是使整个 Electron API 可供访问，但这会导致困惑)。