1. 环境准备与项目初始化
要构建一个Electron文本编辑器，首先需要搭建开发环境。我推荐使用Node.js 16+版本，这是目前Electron官方稳定支持的环境。安装完成后，创建一个空文件夹作为项目根目录，执行npm init -y快速生成package.json文件。这里有个小技巧：在初始化时可以直接加上-y参数跳过问答环节，后期再手动修改配置。
接下来安装核心依赖：
npm install electron --save-dev这个命令会安装最新稳定版的Electron。我实测发现v25.x版本对菜单API的支持最完善，建议锁定这个版本。在package.json中需要配置main入口文件和启动命令：
{ "main": "main.js", "scripts": { "start": "electron ." } }创建三个核心文件：
main.js（主进程）preload.js（预加载脚本）renderer.js（渲染进程）
这里有个新手常踩的坑：文件路径问题。Electron在不同进程中处理路径的方式不同，建议从一开始就使用path.join(__dirname, 'filename')这种绝对路径写法。我在实际项目中遇到过因为相对路径导致的文件加载失败，调试了半天才发现是路径问题。
2. 主进程架构设计
主进程是Electron应用的核心，相当于操作系统的主线程。我们先来搭建基础框架：
const { app, BrowserWindow } = require('electron') const path = require('path') let mainWindow function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) mainWindow.loadFile('index.html') } app.whenReady().then(() => { createWindow() })这段代码创建了一个最基本的Electron窗口。有几个关键点需要注意：
webPreferences中的nodeIntegration默认为false，这是安全最佳实践contextIsolation建议保持开启，防止渲染进程直接访问Node.js API- 预加载脚本(preload)是主进程与渲染进程通信的桥梁
我在团队协作时发现，很多新人会直接在渲染进程里require Node模块，这会导致安全漏洞。正确的做法是通过预加载脚本暴露有限的API，就像给渲染进程戴上了安全手套。
3. 菜单系统实战开发
Electron的菜单系统分为两种：应用菜单和上下文菜单。我们先实现应用菜单：
const { Menu } = require('electron') const template = [ { label: '文件', submenu: [ { label: '打开', accelerator: 'CmdOrCtrl+O', click: () => openFileDialog() }, { type: 'separator' }, { role: 'quit' } ] }, { label: '编辑', submenu: [ { role: 'undo' }, { role: 'redo' }, { type: 'separator' }, { role: 'cut' }, { role: 'copy' }, { role: 'paste' } ] } ] const menu = Menu.buildFromTemplate(template) Menu.setApplicationMenu(menu)这里有几个实用技巧：
accelerator支持跨平台快捷键，CmdOrCtrl会自动适配macOS和Windowsrole使用系统原生行为，确保菜单项功能与操作系统一致- 菜单项点击事件最好封装成独立函数，便于维护
上下文菜单的实现略有不同：
const contextMenu = Menu.buildFromTemplate([ { role: 'cut' }, { role: 'copy' }, { role: 'paste' } ]) mainWindow.webContents.on('context-menu', (e, params) => { if (params.isEditable) { contextMenu.popup() } })这里有个性能优化点：不要在每次右键点击时都创建新菜单，应该提前创建好实例重复使用。我在性能测试中发现，频繁创建菜单对象会导致内存泄漏。
4. 文件操作与进程通信
文件操作是编辑器的核心功能，我们通过dialog模块实现：
const { dialog } = require('electron') const fs = require('fs').promises async function openFile() { const { canceled, filePaths } = await dialog.showOpenDialog({ properties: ['openFile'], filters: [ { name: 'Text', extensions: ['txt'] }, { name: 'All Files', extensions: ['*'] } ] }) if (!canceled) { const content = await fs.readFile(filePaths[0], 'utf-8') mainWindow.webContents.send('file-opened', { path: filePaths[0], content }) } }进程间通信(IPC)是Electron的难点之一，我推荐使用contextBridge+预加载脚本的方式：
// preload.js const { contextBridge, ipcRenderer } = require('electron') contextBridge.exposeInMainWorld('electronAPI', { onFileOpened: (callback) => { ipcRenderer.on('file-opened', (event, data) => { callback(data) }) } })在渲染进程中安全地使用这些API：
window.electronAPI.onFileOpened(({ path, content }) => { document.getElementById('editor').value = content })这种架构有三大优势：
- 安全性：渲染进程不能直接访问Node.js API
- 可维护性：所有IPC通信集中管理
- 可测试性：可以通过mock预加载脚本进行单元测试
5. 编辑器界面与功能增强
基础编辑器界面使用简单的HTML即可实现：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Electron编辑器</title> <style> #editor { width: 100%; height: 100vh; padding: 20px; box-sizing: border-box; border: none; outline: none; resize: none; font-family: monospace; line-height: 1.6; } </style> </head> <body> <textarea id="editor"></textarea> <script src="./renderer.js"></script> </body> </html>为了提升用户体验，我们可以增加这些功能：
- 文件修改状态跟踪
- 自动保存功能
- 语法高亮支持
- 多标签页编辑
比如实现自动保存：
let saveTimeout const SAVE_DELAY = 3000 editor.addEventListener('input', () => { clearTimeout(saveTimeout) saveTimeout = setTimeout(() => { window.electronAPI.saveFile(editor.value) }, SAVE_DELAY) })在实际项目中，我发现3000ms的延迟是最佳平衡点，既能避免频繁IO操作，又不会让用户担心数据丢失。
6. 调试与打包发布
开发过程中有几个实用的调试技巧：
- 使用
mainWindow.webContents.openDevTools()快速打开开发者工具 - 通过
electron-log模块记录日志 - 使用
electron-reloader实现代码热更新
打包推荐使用electron-builder：
npm install electron-builder --save-dev配置示例：
{ "build": { "appId": "com.example.editor", "win": { "target": "nsis" }, "mac": { "category": "public.app-category.developer-tools" } } }打包命令：
npx electron-builder --win --x64我在实际打包过程中遇到过资源路径问题，解决方案是在配置中添加：
"extraResources": [ { "from": "assets/", "to": "assets" } ]7. 性能优化实战经验
经过多个Electron项目实践，我总结出这些性能优化技巧：
- 懒加载：将非核心功能模块动态加载
const heavyModule = await import('./heavy-module.js')- 内存管理：及时释放不再使用的WebContents
window.on('closed', () => { window = null })- 进程隔离：将CPU密集型任务放在独立进程
const { Worker } = require('worker_threads') const worker = new Worker('./worker.js')- CSS优化：避免频繁重绘
.editor { will-change: contents; }- 节流处理：对高频事件进行节流
let lastSave = 0 editor.on('input', throttle(() => { if (Date.now() - lastSave > 1000) { saveContent() lastSave = Date.now() } }, 500))在项目后期，我建议使用Chrome DevTools的Performance面板进行性能分析，重点关注：
- JavaScript执行时间
- 内存占用曲线
- 布局重绘次数
- GPU使用情况
这些数据能帮助准确定位性能瓶颈。
