Electron

特色

適用情境

• 程式碼編輯器與開發者工具
• 聊天與協作軟體的桌面用戶端
• 企業內部業務應用程式
• 將既有 Web 產品做成桌面應用程式

安裝

1. 1

   準備 Node.js

   Electron 透過 Node.js 與 npm 安裝和執行。請安裝 Node.js 的 LTS 版本，並確認兩者的版本號都能顯示。

   node -v && npm -v

   複製
2. 2

   在專案中加入 Electron

   在新資料夾建立 package.json，並把 electron 安裝為開發相依套件。接著將 package.json 的 main 欄位設為 main.js，再加入執行 electron . 的 start 腳本。

   mkdir my-electron-app && cd my-electron-app && npm init -y && npm install --save-dev electron

   複製
3. 3

   使用 Electron Forge 開始

   若希望專案一開始就具備封裝與發佈功能，可使用官方工具 Electron Forge 的建立指令。在產生的資料夾中執行 npm start 即可啟動應用程式。

   npm init electron-app@latest my-app

   複製

第一個程式

開啟第一個視窗

main.js 是主程序的進入點。應用程式就緒後，會建立 800×600 的 BrowserWindow，並載入同一資料夾中的 index.html。依照 macOS 的慣例，關閉所有視窗後應用程式仍會保留，因此只在其他平台結束應用程式。在 main.js 旁放一個簡單的 index.html，再執行 npm start。

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

npm init -y
npm install --save-dev electron
npm pkg set main=main.js scripts.start="electron ."
npm start

常用工具

Electron Forge

官方的一站式工具，涵蓋專案建立、開發執行、封裝、產生安裝程式與發佈。

electron-builder

廣泛使用的封裝工具，支援多平台安裝程式、程式碼簽章與自動更新。

Electron Fiddle

官方實驗工具，可快速撰寫小型 Electron 範例，並在不同 Electron 版本中執行。

Playwright

可啟動 Electron 應用程式進行端對端測試，操作視窗並在主程序中執行程式碼。

官方文件與參考資料

• 官方Electron
• 官方Electron Documentation
• 官方Electron Forge
• 學習Electron Tutorial
• 學習Electron Fiddle
• 參考BrowserWindow API
• 參考Electron Security Checklist
• 社群electron/electron on GitHub

使用的語言

• TypeScriptTypeScript 為 JavaScript 加入靜態型別，在程式執行前找出錯誤，讓大型程式碼更容易維護。
• JavaScriptJavaScript 是以 ECMAScript 為標準的動態程式語言，可在所有網頁瀏覽器以及 Node.js 等執行環境中執行。