17370845950

Electron 通过整合 Chromium 和 Node.js，使 JavaScript 能构建跨平台桌面应用；其核心含 main.js（主进程）、renderer.js（渲染进程）和 index.html；需用 electron-builder 等工具打包，并注意 native 模块编译、路径处理及安全配置。

JavaScript 本身不能直接运行桌面应用，但通过 Electron 框架，可以用 HTML、CSS 和 JavaScript 构建真正的跨平台桌面程序（Windows/macOS/Linux）。它本质是将 Chromium 渲染引擎 + Node.js 运行时打包在一起，让你写 Web 技术，跑成原生桌面 App。

Electron 应用的核心结构

一个基础 Electron 项目包含三个关键部分：

• main.js：主进程入口，负责创建窗口、管理生命周期、与系统交互（如菜单、托盘、文件系统）
• renderer.js（或任意前端 JS）：渲染进程脚本，运行在网页环境中，处理 UI 逻辑（可访问 DOM，但默认禁用 Node.js API）
• index.html：主页面，被主进程加载进 BrowserWindow，是用户看到的界面

注意：从 Electron 12+ 开始，默认禁用 nodeIntegration 和 contextIsolation: false，安全推荐保持默认，需用 contextBridge + preload.js 安全暴露有限能力给渲染进程。

如何打包成跨平台安装包

Electron 自身只提供运行时，不内置打包工具。主流方案是使用 electron-builder（功能全、社区活跃、支持自动更新）或 electron-packager（轻量、适合定制化）。

以 electron-builder 为例：

• 安装：npm install --save-dev electron-builder
• 在 package.json 中添加构建配置（如 target、icon、publish 等）
• 添加 scripts："build": "electron-builder"
• 准备图标：Windows 需 .ico，macOS 需 .icns，Linux 需 .png
• 运行 npm run build，它会自动生成各平台的可执行文件（.exe / .dmg / .AppImage）及安装包（.msi / .pkg）

构建过程会下载对应平台的 Electron 二进制文件，并把你的代码、资源、依赖一起打包进去，最终产物可脱离 Node.js 环境独立运行。

常见注意事项和避坑点

打包不是“一键就完事”，实际开发中容易卡在这几处：

• Native 模块需重新编译：如果用了 sqlite3、ffi-napi 等 C++ 扩展，必须用 electron-rebuild 针对当前 Electron 版本重编译，否则运行报错
• 路径问题：用 app.getAppPath() 或 path.join(__dirname, '..') 获取资源路径，避免硬编码；__dirname 在渲染进程不可靠，优先用 ipcRenderer 向主进程请求路径
• 打包后 require 失败：检查 package.json 的 files 字段是否遗漏了必要资源；Node.js 模块若被 tree-shaken，可加 "externals": ["moduleName"] 到 webpack 配置（如有）
• macOS 公证（Notarization）：上架 Mac App Store 或避免“无法验证开发者”警告，需 Apple 开发者账号 + 代码签名 + 公证流程

启动和调试的小技巧

开发阶段别总打包测试，高效方式是：

• 用 electron . 直接运行项目（确保 main.js 在根目录）
• 在 main.js 中加 mainWindow.webContents.openDevTools() 快速唤出 DevTools
• 渲染进程里用 require('electron').ipcRenderer 与主进程通信，不要直接调 Node.js
• 用 electron-is-dev 区分开发/生产环境，避免开发时误触发自动更新等逻辑

不复杂但容易忽略。