← [ BACK_TO_NOTES ]

Electron 项目结构

Electron 项目结构的关键不是目录好不好看,而是按 main、renderer、preload、shared 和构建产物边界组织代码。

#desktop #electron #concept #growing

[!info] related notes

Electron 项目结构

一句话定义

Electron 项目结构最关键的不是“文件夹怎么命名”,而是按进程边界和运行时边界把代码分层。

核心内容

至少要分开的几层

  • main:主进程入口、生命周期、窗口管理、高权限能力
  • preload:桥接层、白名单 API、IPC 封装
  • renderer:页面、组件、状态管理、前端交互
  • shared:两侧都能复用的纯逻辑、类型、协议定义

为什么要这样拆

因为 Electron 不是单运行时项目。

如果不按边界拆,很容易出现:

  • renderer 引进 main 才能用的代码
  • preload 混进页面逻辑
  • 构建时 main / preload / renderer 产物互相污染

一个实用原则

看到一段代码时,先问:

  • 这段代码运行在哪个进程
  • 它依赖的 API 属于哪个运行时
  • 这段逻辑是否应该通过桥接层或共享层抽出来

边界与易混淆点

  • 共享层不等于“随便什么都能共享”
  • 真正能共享的通常是纯逻辑、类型、协议,而不是带 Electron 运行时依赖的代码
创建于 2026/4/13 更新于 2026/7/15
Digital Biome
Access

键盘导航

j / k / ↑ / ↓
选择对象
Enter / o
打开选择
/ 或 Ctrl+K
全站搜索
i / f / 1–4
筛选当前列表
g → h / l / p / t / a
首页 / 笔记 / 项目 / 工具 / About
r → 1–9
打开所选对象的关联
u
返回上一页
Esc
关闭浮层 / 取消命令;输入框内清空文本