1. Electron的双面特性和运行机制

Electron像座架在Node.js和Chromium之间的魔法桥，当我们将前端HTML文件拖进浏览器时，渲染进程默认只能使用Web API。但在Electron的魔法世界里，通过nodeIntegration开关，我们能让页面脚本直接访问Node.js的全套武功秘籍。比如你的登录页面想直接读写本地配置文件，或系统托盘需要调用OS级别的API，这些"跨界操作"正是Electron的杀手锏。

2. 基础操作：在渲染进程召唤Node模块

技术栈：Electron 28.0.0 + Node.js 18.x

让我们先写个自动创建日志文件的案例，在按钮点击时用Node.js的fs模块直接在页面操作文件系统：

// main.js 主进程
const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,  // 开启Node.js集成
      contextIsolation: false  // 允许在渲染进程直接使用require
    }
  })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

// index.html 前端页面
<!DOCTYPE html>
<html>
<body>
  <button onclick="createLog()">生成日志文件</button>
  <script>
    const fs = require('fs') // 直接引入Node核心模块！
    const path = require('path')

    function createLog() {
      const logPath = path.join(app.getAppPath(), 'runtime.log')
      fs.writeFileSync(logPath, `日志创建时间：${new Date().toISOString()}`)
      alert(`日志已生成在：${logPath}`)
    }
  </script>
</body>
</html>

踩坑警告：这里关闭了contextIsolation是为了演示方便，实际生产环境应该使用Preload脚本注入需要的方法，这在后续章节会详细说明。

3. 安全通道：主进程与渲染进程的加密对话

当我们要执行敏感操作时（比如调用系统命令），更安全的做法是通过IPC（进程间通信）进行：

技术栈补充：IPC通信模式

// main.js 增加IPC监听
const { ipcMain } = require('electron')

ipcMain.handle('execute-cmd', (event, command) => {
  const { exec } = require('child_process')
  return new Promise((resolve, reject) => {
    exec(command, (error, stdout) => {
      if (error) reject(error.message)
      resolve(stdout)
    })
  })
})

// preload.js 安全暴露方法
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  runCommand: (cmd) => ipcRenderer.invoke('execute-cmd', cmd)
})

// index.html 安全调用
<script>
document.getElementById('terminal').addEventListener('click', async () => {
  const output = await window.electronAPI.runCommand('dir') // Windows系统
  console.log('命令执行结果：', output)
})
</script>

这里使用了Electron的安全架构黄金组合：Preload脚本 + ContextBridge，既保持contextIsolation开启，又能安全暴露指定接口。

4. 实战演练：打造系统托盘和原生菜单

技术栈延伸：Tray模块 + Menu模块

以下代码演示如何在前端触发系统级功能（需要主进程配合）：

// main.js 创建托盘
const { Tray, Menu } = require('electron')
let tray = null

ipcMain.on('create-tray', (event, iconPath) => {
  tray = new Tray(iconPath)
  const contextMenu = Menu.buildFromTemplate([
    { label: '恢复窗口', click: () => win.show() },
    { label: '退出', click: () => app.quit() }
  ])
  tray.setToolTip('我的Electron应用')
  tray.setContextMenu(contextMenu)
})

// preload.js 新增方法
contextBridge.exposeInMainWorld('electronAPI', {
  createTray: (iconPath) => ipcRenderer.send('create-tray', iconPath)
})

// 页面中调用
<button onclick="window.electronAPI.createTray('icon.png')">
  创建系统托盘
</button>

这个案例展示了Node.js原生模块与Electron API的深度配合，即使像系统托盘这样的系统级功能，也能通过合理的进程分工优雅实现。

5. 典型应用场景分析

  • 本地配置文件读写：直接在设置页面使用fs模块修改JSON配置
  • 硬件设备交互：通过serialport库在前端操作USB设备
  • 性能监控看板：使用os模块实时显示内存/CPU状态
  • 自动化工具开发：结合puppeteer在渲染进程控制无头浏览器

6. 优劣评估与技术选型

优势矩阵：

  • 消除前后端重复逻辑（如数据校验）
  • 开发效率提升至少3倍（API直达页面）
  • 调用系统级功能如本地文件、硬件等

风险清单：

  • 安全风险（XSS攻击可能升级为系统入侵）
  • 包体积膨胀（包含Chromium内核）
  • 性能陷阱（过度依赖同步IO操作）

7. 避坑指南与最佳实践

  1. 安全加固三件套：始终开启contextIsolation+sandbox，通过Preload脚本白名单暴露必要接口
  2. 通信优化策略：高频操作采用IPC批处理（如收集日志时每10秒发送一批数据）
  3. 错误处理规范：在Preload层封装统一的错误码体系
  4. 依赖管理建议：原生模块（如sqlite3）需要在electron-rebuild后使用

性能优化示例：

// 优化低效的频繁IPC调用
let logCache = []
const LOG_BATCH_SIZE = 100

// 前端代码
function trackAction(action) {
  logCache.push(action)
  if(logCache.length >= LOG_BATCH_SIZE) {
    window.electronAPI.saveLogs(logCache)
    logCache = []
  }
}

// Preload层增加防抖处理
contextBridge.exposeInMainWorld('electronAPI', {
  saveLogs: debounce(ipcRenderer.send, 500)
})

8. 技术总结与选择建议

对于需要深度系统集成的桌面应用（如开发工具、数据看板、硬件控制程序），Electron的Node.js集成能力是核心竞争力。但如果是简单信息展示类应用，可能造成资源浪费。建议新项目采用最新安全方案（Context Isolation + Preload模式），既有项目逐步进行安全改造。