先決條件

跟隨教學一起操作

這是 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。