知方号

知方号

VS Code源码简析

一.Electron基本结构

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类型

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。