Electron 基本要求

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

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

目標(biāo)?

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

如果您希望從單命令樣板開始項目，我們建議您使用 Electron Forge 的 create-electron-app 命令。

前言?

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

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

所需工具?

代碼編輯器

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

命令行工具?

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

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

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

Git 和 GitHub?

Git 是常用的版本控制系統(tǒng)，GitHub 是一個基于它的協(xié)作開發(fā)平臺。 雖然它們對開發(fā) Electron 應(yīng)用而言不是必需的，但我們在后續(xù)教程中會使用 GitHub Releases 來實現(xiàn)軟件的自動更新。 因此，我們建議您：

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

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

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

通過 GITHUB DESKTOP 安裝 GIT

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

Node.js 和 npm?

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

提示

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

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

注意事項

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

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