Electron是一個(gè)使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架。 Electron 將 Chromium 和 Node.js 嵌入到了一個(gè)二進(jìn)制文件中，因此它允許你僅需一個(gè)代碼倉(cāng)庫(kù)，就可以撰寫(xiě)支持 Windows、macOS 和 Linux 的跨平臺(tái)應(yīng)用。

本教程將指導(dǎo)您使用 Electron 開(kāi)發(fā)一個(gè)桌面應(yīng)用，并將其分發(fā)給終端用戶(hù)。

目標(biāo)?

本教程首先指導(dǎo)您完成從頭開(kāi)始拼湊一個(gè)最小的 Electron 應(yīng)用程序的過(guò)程，然后教您如何使用 Electron Forge 打包并將其分發(fā)給用戶(hù)。

如果您希望從單命令樣板開(kāi)始項(xiàng)目，我們建議您使用 Electron Forge 的 create-electron-app 命令。

前言?

Electron 是網(wǎng)頁(yè)應(yīng)用 (web apps) 的一個(gè)原生包裝層，在 Node.js 環(huán)境中運(yùn)行。 因此，本教程假設(shè)您已經(jīng)對(duì) Node.js 和前端 Web 開(kāi)發(fā)有一定地了解。 如果您還需要了解一些背景知識(shí)，我們推薦您閱讀：

• Web 入門(mén) (MDN Web Docs)
• NodeJS官方入門(mén)指南

所需工具?

代碼編輯器

您需要一個(gè)文本編輯器來(lái)編寫(xiě)代碼。 我們推薦使用 Visual Studio Code (VS Code)，不過(guò)您也可以選擇自己喜歡的。

命令行工具?

在整個(gè)教程中，我們將要求您使用各種命令行接口 (CLI) 。 您可以使用系統(tǒng)的默認(rèn)命令行工具：

• Windows: 命令提示符 / PowerShell
• macOS: Terminal
• Linux: 視發(fā)行版決定 (如 GNOME 終端 Konsole)

大多數(shù)代碼編輯器也內(nèi)置了終端，您也可以使用它們。

Git 和 GitHub?

Git 是常用的版本控制系統(tǒng)，GitHub 是一個(gè)基于它的協(xié)作開(kāi)發(fā)平臺(tái)。 雖然它們對(duì)開(kāi)發(fā) Electron 應(yīng)用而言不是必需的，但我們?cè)诤罄m(xù)教程中會(huì)使用 GitHub Releases 來(lái)實(shí)現(xiàn)軟件的自動(dòng)更新。 因此，我們建議您：

• 創(chuàng)建一個(gè) GitHub 賬號(hào)
• 安裝 Git

如果您對(duì) Git 還不熟悉，我們推薦閱讀 GitHub 的 Git 指南 。 如果您喜歡可視化界面而不是命令行，也可以使用 GitHub Desktop 。

我們建議您創(chuàng)建一個(gè)本地 Git 倉(cāng)庫(kù)，在閱讀教程之前將其推送到 GitHub，并且在完成教程各個(gè)步驟后將代碼提交上去。

通過(guò) GITHUB DESKTOP 安裝 GIT

如果您的操作系統(tǒng)中沒(méi)有安裝 Git，GitHub Desktop 會(huì)自動(dòng)幫您安裝 Git 最新版本。

Node.js 和 npm?

要開(kāi)發(fā) Electron 應(yīng)用，您需要安裝 Node.js 運(yùn)行環(huán)境和它的包管理器 npm。 我們推薦安裝最新的長(zhǎng)期支持 (LTS) 版本。

提示

請(qǐng)使用為你平臺(tái)預(yù)構(gòu)建的 Node.js 安裝器來(lái)進(jìn)行安裝， 否則，您可能會(huì)遇到與不同開(kāi)發(fā)工具不兼容的問(wèn)題。 如果您使用 macOS，我們推薦使用如 Homebrew 或 nvm 這樣的包管理器，來(lái)避開(kāi)讀寫(xiě)目錄權(quán)限問(wèn)題。

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

注意事項(xiàng)

雖然您需要在開(kāi)發(fā)環(huán)境安裝 Node.js 才能編寫(xiě) Electron 項(xiàng)目，但是 Electron 不使用您系統(tǒng)的 Node.js 環(huán)境來(lái)運(yùn)行它的代碼。 相反地，它使用它內(nèi)置的 Node.js 運(yùn)行時(shí)。 這意味著您的終端用戶(hù)不需要 Node.js 環(huán)境也可以運(yùn)行您的應(yīng)用。

要查看您應(yīng)用內(nèi)置的 Node.js 版本，您可以訪(fǎng)問(wèn)主進(jìn)程 (main process) 或預(yù)加載腳本 (preload script) 中的 process.versions 變量。 您也可以參考 electron/releases 倉(cāng)庫(kù)中的版本列表。