VS Code作为Electron的成功案例,一头扎进源码之前,有必要简单梳理下Electron的基本结构
从实现上来看:
Electron = Node.js + Chromium + Native API也就是说Electron拥有Node运行环境,依靠Chromium提供基于Web技术(HTML、CSS、JS)的界面交互支持,另外还具有一些平台特性,比如桌面通知
从API设计上来看,Electron App一般都有1个Main Process和多个Renderer Process:
main process:主进程环境下可以访问Node及Native API
renderer process:渲染器进程环境下可以访问Browser API和Node API及一部分Native API
API设计如此,那么Electron App的项目结构也至少包括这两部分内容
主进程相当于后台服务,常用于:
多窗体管理(创建/切换)
应用生命周期管理
作为进程通信基站(IPC Server)
自动更新
工具条菜单栏注册
渲染器进程界面交互相关的,具体的业务功能,都由renderer进程来做,3个基本原则:
尽量用renderer干活,包括网络请求
太耗时的用Worker拆出去
需要跨renderer共享的用子进程拆出去,交由main管理
You can use all packages that work with Node.js in the main process as well as in the renderer process if you have webPreferences.nodeIntegration set to true in the BrowserWindow options. This is the default.
It’s actually recommended to do as much as possible in the renderer process.
P.S.关于main与renderer分工的讨论,请查看What is the best way to make Http requests using Electron?
二.vscode源码结构以下内容参考源码版本为v1.19.3
目录结构├── build # gulp编译构建脚本├── extensions # 内置插件├── gulpfile.js # gulp task├── i18n # 国际化翻译包├── out # 编译输出目录├── product.json # App meta信息├── resources # 平台相关静态资源,图标等├── scripts # 工具脚本,开发/测试├── src # 源码目录└── test # 测试套件src下的结构如下:
├── bootstrap-amd.js # 子进程实际入口├── bootstrap.js # 子进程环境初始化├── buildfile.js # 构建config├── cli.js # CLI入口├── main.js # 主进程入口├── paths.js # AppDataPath与DefaultUserDataPath├── typings│ └── xxx.d.ts # ts类型