Vite + Electron 实现动态模块热重载，加速桌面应用开发

2023-10-29 11:35:53

Vite + Electron：动态模块热重载让桌面应用开发如虎添翼

作为一名技术达人，打造流畅的桌面应用开发体验至关重要。本文将深入探讨如何在 Vite + Electron 中实现动态模块热重载（HMR），极大地提升你的编码效率。

动态模块热重载：不可或缺的现代工具

HMR 是现代前端开发中不可或缺的一环。它使你能够实时更新代码，无需重新编译或刷新整个应用程序。如此一来，开发迭代速度显著提升，让你专注于代码编写本身，而非繁琐的重启步骤。

Vite + Electron：天作之合

Electron 是一款广受欢迎的框架，用于用 JavaScript 和 HTML/CSS 构建跨平台桌面应用程序。它与 Vite，一个快速且增量式的构建工具，可谓珠联璧合。Vite 提供了开箱即用的 HMR 支持，让 Electron 应用开发更加顺畅。

HMR 实现指南

1. 安装 Vite 插件

npm install --save-dev vite-plugin-electron-reload

2. 配置 Vite

在 vite.config.js 中添加插件：

import { defineConfig } from 'vite'
import electronReload from 'vite-plugin-electron-reload'

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

3. 添加 Electron 主进程监听器

在 Electron 主进程（main.js）中添加 HMR 监听：

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

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })

  mainWindow.loadURL('http://localhost:3000')

  // 监听模块热重载
  mainWindow.webContents.on('did-frame-finish-load', () => {
    mainWindow.webContents.executeJavaScript(`
      if (module.hot) {
        module.hot.accept();
        module.hot.dispose(() => {
          window.location.reload();
        })
      }
    `)
  })
}

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

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

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