在桌面應用開發中，開發體驗的好壞對於生產效率有著直接的影響。Electron 為開發桌面應用提供了非常強大的平台，而 Vite 則是新一代的前端構建工具，因其高速的開發伺服器和即時的熱更新體驗而廣受歡迎。當我們將 Vite 與 Electron 結合時，可以顯著提高開發效率，減少構建和重新加載時間，從而提升開發者的體驗。

在這篇文章中，我們將探討如何使用 Vite 來加速 Electron 應用的開發，並提供具體的操作步驟來幫助你快速上手。

為什麼選擇 Vite？

在使用 Electron 開發應用時，我們經常需要對 React 或其他前端框架進行熱更新（HMR）、快速建立和高效開發伺服器的支持。而 Vite 作為一個現代化的構建工具，正好提供了這些功能：

• 超快的熱重載（HMR）：Vite 只會對實際變更的模組進行熱更新，而不是重新打包整個應用，大大提高了開發速度。
• 即時開發伺服器：Vite 內建開發伺服器，啟動時間極短，並且支持模組即時載入。
• 輕量的構建體驗：與傳統佈建工具相比，Vite 更加輕量，並且使用的是原生 ES 模組進行載入，這讓佈建過程更加高效。

使用 electron-vite 佈建 Electron 應用的步驟

在 Electron 和 React 的環境設定 中我們可以看到用 Vite + Electron 來設定跨平台的專案，這裡將介紹一個更方便的工具： electron-vite

1. 創建 electron-vite 程式

首先，我們需要使用 electron-vite 提供的腳手架工具來初始化一個新的 Electron 程式。執行以下命令來創建一個全新的項目：

npm create electron-vite@latest my-electron-vite-app

在這個命令執行過程中，你可以選擇自己喜歡的前端框架，例如 React、Vue 或 Svelte。這裡我們選擇 React：

✔ Select a framework: › react

接著，安裝依賴並進入項目目錄：

cd my-electron-vite-app
npm install

2. 目錄結構

創建完成後，electron-vite 項目會有以下的目錄結構：

my-electron-vite-app/
├── dist/              # 佈建輸出文件
├── electron/          # Electron 主程序代碼
│   └── main.js        # 主程序入口
├── src/               # 渲染程序代碼（使用 React/Vue 等框架）
│   └── App.jsx        # React 程式入口
├── package.json       # 項目配置
└── vite.config.js     # Vite 配置文件

這個目錄結構將主程序（Electron 的核心邏輯）與渲染程序（React 或 Vue 等前端程式）清晰地分離，保持了良好的代碼組織。

3. 開發模式與熱更新

electron-vite 的一個核心優勢在於其內建的 熱模組更新（HMR）。這意味著當你修改 React 組件或程式邏輯時，Electron 視窗會即時反映這些變更，無需手動刷新或重新啟動程式。

你可以通過以下命令啟動開發伺服器，並同時啟動 Electron 程式：

npm run dev

這會同時啟動 Vite 開發伺服器 和 Electron 主程序，並且支持熱模組更新功能。當你修改 src/App.jsx 或 Electron 主程序中的代碼時，程式將即時更新。

例如，你可以修改 src/App.jsx 文件來更改程式界面：

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h1>Hello, Electron + Vite!</h1>
      <button onClick={() => setCount(count + 1)}>
        Count is {count}
      </button>
    </div>
  );
}

export default App;

保存文件後，你會立即在 Electron 視窗中看到修改後的界面，並且不需要手動刷新頁面。

4. 佈建程式

當程式開發完成後，你可以使用 electron-vite 來佈建生產環境下的程式。只需運行以下命令即可：

npm run build

這會佈建渲染程序並將結果輸出到 dist 目錄，然後 Electron 會將這些文件打包成一個完整的桌面程式。在佈建過程中，Vite 的 Rollup 佈建系統會對代碼進行壓縮和優化，從而生成高效的最終程式。

5. 打包程式

electron-vite 預設支持通過 electron-builder 來打包程式，你可以直接在命令行中執行以下命令：

npm run build
npm run build:electron

這樣，你的程式就會被打包成為可安裝的桌面程式，並且支持多平台發佈（Windows、macOS 和 Linux）。

為什麼選擇 electron-vite 而不是手動配置？

在傳統的 Electron 開發過程中，開發者通常需要手動配置 Webpack 或 Vite，並且還需要處理主程序與渲染程序之間的整合和通信問題。這些配置過程不僅複雜，而且容易出錯。

electron-vite 則為我們解決了這些問題，通過一鍵式配置，實現了以下功能：

1. 無縫整合 Vite 和 Electron：自動配置 Vite 和 Electron，無需手動配置，減少開發摩擦。
2. 內建熱模組更新（HMR）：讓開發過程變得更快速和高效，減少開發者在重啟程式上的時間浪費。
3. 簡化的佈建與打包：內建 Rollup 的佈建流程，並支持 electron-builder 的打包流程，無需額外配置即可完成佈建與發佈。

最佳實踐與進階技巧

1. 使用 Electron 預載入腳本來實現安全通信

為了確保程式的安全性，electron-vite 支持使用預加載腳本來在主程序和渲染程序之間進行安全通信。你可以在 electron/preload.js 中定義暴露給渲染程序的 API，這樣可以避免直接在渲染程序中使用 Node.js API，從而防止安全漏洞。

const { contextBridge, ipcRenderer } = require('electron');

// 安全地將 API 暴露給渲染程序
contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (channel, data) => ipcRenderer.send(channel, data),
  receiveMessage: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args))
});

2. 使用插件擴展 Vite

Vite 擁有強大的插件系統，當我們使用 electron-vite 時，也可以借助這些插件來擴展功能。例如，使用 @vitejs/plugin-react 來優化 React 的開發體驗：

npm install @vitejs/plugin-react --save-dev

然後在 vite.config.js 中進行配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

結論

electron-vite 是一個專門為 Electron 開發優化的工具，它簡化了傳統 Electron 開發中的繁瑣配置，並將 Vite 的強大功能無縫集成到 Electron 的開發流程中。通過 electron-vite，你可以快速啟動一個高效的開發環境，並享受到即時熱更新和快速佈建的便利。

對於想要快速佈建跨平台桌面程式的開發者來說，electron-vite 是一個不可錯過的工具。它不僅簡化了配置流程，還顯著提升了開發效率，讓你能夠專注於程式功能的開發，而非浪費時間在工具配置上。

現在就試試 electron-vite，感受它帶來的高效開發體驗吧！