可擴展電子應用程序的架構？

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 可訪問，但這會導致大混亂）。