先決條件

跟著教學一起做

這是 Electron 教學的第 1 部分。

1. 先決條件
2. 建立您的第一個應用程式
3. 使用預載入腳本
4. 新增功能
5. 封裝您的應用程式
6. 發佈與更新

Electron 是一個使用 JavaScript、HTML 和 CSS 建立桌面應用程式的框架。透過將 Chromium 和 Node.js 嵌入到單一二進位檔案中，Electron 讓您可以使用單一 JavaScript 程式碼庫建立可在 Windows、macOS 和 Linux 上運作的跨平台應用程式。

本教學將引導您完成使用 Electron 開發桌面應用程式並將其發佈給最終使用者的過程。

目標

本教學首先引導您完成從頭開始組裝一個最小的 Electron 應用程式的過程，然後教您如何使用 Electron Forge 封裝並發佈給使用者。

如果您喜歡使用單一命令樣板開始專案，我們建議您從 Electron Forge 的 create-electron-app 命令開始。

假設

Electron 是 Web 應用程式的原生包裝層，並在 Node.js 環境中執行。因此，本教學假設您大致熟悉 Node 和前端 Web 開發基礎知識。如果您在繼續之前需要做一些背景閱讀，我們建議您參考以下資源

• 開始使用 Web (MDN Web Docs)
• Node.js 簡介

所需工具

程式碼編輯器

您將需要一個文字編輯器來撰寫您的程式碼。我們建議使用 Visual Studio Code，但您可以選擇您喜歡的任何一個。

命令列

在整個教學中，我們會要求您使用各種命令列介面 (CLI)。您可以將這些命令輸入到您系統的預設終端機

• Windows：命令提示字元或 PowerShell
• macOS：終端機
• Linux：因發行版本而異（例如 GNOME 終端機、Konsole）

大多數程式碼編輯器也都附帶整合式終端機，您也可以使用它。

Git 和 GitHub

Git 是一種常用的原始碼版本控制系統，而 GitHub 是一個建立在其之上的協作開發平台。雖然兩者都不是建立 Electron 應用程式的絕對必要條件，但我們稍後會在教學中使用 GitHub 發佈來設定自動更新。因此，我們要求您

• 建立 GitHub 帳戶
• 安裝 Git

如果您不熟悉 Git 的運作方式，我們建議您閱讀 GitHub 的 Git 指南。如果您喜歡使用視覺介面而不是命令列，您也可以使用 GitHub Desktop 應用程式。

我們建議您在開始教學之前建立本機 Git 儲存庫並將其發佈到 GitHub，並在每個步驟後提交您的程式碼。

透過 GitHub Desktop 安裝 Git

如果您尚未安裝 Git，GitHub Desktop 會在您的系統上安裝最新版本的 Git。

Node.js 和 npm

要開始開發 Electron 應用程式，您需要將 Node.js 執行階段及其捆綁的 npm 套件管理器安裝到您的系統中。我們建議您使用最新的長期支援 (LTS) 版本。

提示

請使用針對您平台預先建立的安裝程式來安裝 Node.js。否則，您可能會遇到與不同開發工具不相容的問題。如果您使用的是 macOS，我們建議您使用像 Homebrew 或 nvm 之類的套件管理器，以避免任何目錄權限問題。

要檢查 Node.js 是否已正確安裝，您可以在執行 node 和 npm 命令時使用 -v 標記。這些應該會列印出已安裝的版本。

$ node -v
v16.14.2
$ npm -v
8.7.0

注意

雖然您需要在本機安裝 Node.js 才能建立 Electron 專案，但 Electron 不會使用您系統的 Node.js 安裝來執行其程式碼。相反，它會捆綁自己的 Node.js 執行階段。這表示您的最終使用者不需要自行安裝 Node.js 作為執行您應用程式的先決條件。

要檢查您的應用程式中正在執行哪個版本的 Node.js，您可以存取主處理程序或預載入腳本中的全域 process.versions 變數。您也可以參考 https://releases.electronjs.org/releases.json。