Electron桌面应用开发实战：从零构建Markdown编辑器

1. Electron 开发入门：从零构建桌面应用 Demo

刚接触 Electron 时，我被它"用前端技术开发桌面应用"的理念深深吸引。作为一个长期使用 Node.js 的后端开发者，第一次看到用 HTML+CSS+JavaScript 就能做出跨平台桌面应用时，那种兴奋感至今难忘。今天我就带大家从零开始，用 Electron 构建一个完整的桌面应用 Demo，过程中会分享那些官方文档没写的实战技巧。

这个 Demo 将包含 Electron 的核心功能：主进程与渲染进程通信、本地文件操作、系统托盘图标、自定义菜单等。不同于简单的"Hello World"，我们会构建一个具备实用功能的 Markdown 编辑器，过程中你会学到如何避免 Electron 常见的性能陷阱和安全问题。无论你是前端想进军桌面开发，还是后端想拓宽技术栈，这个实战指南都能让你快速上手。

2. 环境准备与项目初始化

2.1 工具链配置

推荐使用最新 LTS 版本的 Node.js（当前是 18.x），配合 npm 或 yarn 作为包管理器。我个人习惯用 yarn 因为它的缓存机制更高效：

bash复制# 检查Node.js版本
node -v
# v18.12.1

# 初始化项目
mkdir electron-markdown-demo && cd electron-markdown-demo
yarn init -y

接着安装 Electron，注意这里有个版本选择的小技巧：

bash复制yarn add electron@25 -D

为什么选择 Electron 25 而不是最新版？因为奇数版本（如25、27）是开发版，偶数版本（如24、26）是稳定版。对于生产环境建议使用最新的稳定版，但学习时可以用开发版体验最新特性。

2.2 基础目录结构

一个规范的 Electron 项目通常这样组织：

code复制/electron-markdown-demo
├── main.js         # 主进程入口
├── preload.js      # 预加载脚本
├── package.json
├── src
│   ├── renderer    # 渲染进程代码
│   │   ├── main.js # 前端入口
│   │   └── styles
│   └── assets      # 静态资源
└── build           # 构建输出

注意：永远不要把渲染进程的代码直接放在根目录下，这会导致安全风险。主进程和渲染进程代码必须物理隔离。

3. 主进程开发实战

3.1 基础窗口创建

在 main.js 中，我们首先创建一个基本的浏览器窗口：

javascript复制const { app, BrowserWindow } = require('electron')
const path = require('path')

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false, // 必须关闭！
      contextIsolation: true // 必须开启！
    }
  })
  
  // 加载React开发服务器或本地文件
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:3000')
    mainWindow.webContents.openDevTools()
  } else {