vscode 是前端工程师常用的 ide,而且它的实现也是基于前端技术。既然是前端技术实现的,那么我们用所掌握的前端技术,完全可以实现一个类似 vscode 的 ide。但在那之前,我们首先还是要把 vscode 是怎么实现的理清楚。本文我们就来理一下 vscode 是怎么跑起来的。
首先, vscode 是一个 electron 应用,窗口等功能的实现基于 electron,所以想梳理清楚 vscode 的启动流程,需要先了解下 electron。
electron
electron 基于 node 和 chromium 做 js 逻辑的执行和页面渲染,并且提供了 BrowserWindow 来创建窗口,提供了 electron 包的 api,来执行一些操作系统的功能,比如打开文件选择窗口、进程通信等。
每个 BrowserWindow 窗口内的 js 都跑在一个渲染进程,而 electron 有一个主进程,负责和各个窗口内的渲染进程通信。
如图所示,主进程可以使用 nodejs 的 api 和 electron 提供给主进程的 api,渲染进程可以使用浏览器的 api、nodejs 的 api 以及 electron 提供给渲染进程的 api,除此以外,渲染进程还可以使用 html 和 css 来做页面的布局。
vscode 的每个窗口就是一个 BrowserWindow,我们启动 vscode 的时候是启动的主进程,然后主进程会启动一个 BrowserWindow 来加载窗口的 html,这样就完成的 vscode 窗口的创建。(后续新建窗口也是一样的创建 BrowserWindow,只不过要由渲染进程通过 ipc 通知主进程,然后主进程再创建 BrowserWindow,不像第一次启动窗口直接主进程创建 BrowserWindow 即可。)
vsocde 窗口启动流程
我们知道 vscode 基于 electron 来跑,electron 会加载主进程的 js 文件,也就是 vscode 的 package.json 的 main 字段所声明的 ./out/main.js,我们就从这个文件开始看。
src/main
(下面的代码都是我从源码简化来的,方便大家理清思路)
// src/main.js
const { app } = require('electron');
app.once('ready', onReady);
async function onReady() {
try {
startup(xxxConfig);
} catch (error) {
console.error(error);
}
}
function startUp() {
require('./bootstrap-amd').load('vs/code/electron-main/main');
}
可以看到,./src/main.js 里面只是一段引导代码,在 app 的 ready 事件时开始执行入口 js。也就是 vs/code/electron-main/main,这是主进程的入口逻辑。
CodeMain
// src/vs/code/electron-main/main.ts
class CodeMain {
main(): void {
try {
this.startup();
} catch (error) {
console.error(error.message);
app.exit(1);
}
}
private async startup(): Promise<void> {
// 创建服务
const [
instantiationService,
instanceEnvironment,
environmentMainService,
configurationService,
stateMainService
] = this.createServices();
// 初始化服务
await this.initServices();
// 启动
await instantiationService.invokeFunction(async accessor => {
//创建 CodeApplication 的对象,然后调用 startup
return instantiationService.createInstance(CodeApplication).startup();
});
}
}
const code = new CodeMain();
code.main();
可以看到,vscode 创建了 CodeMain 的对象,这个是入口逻辑的开始,也是最根上的一个类。它创建和初始化了一些服务,然后创建了 CodeApplication 的对象。
也许你会说,创建对象为啥不直接 new,还要调用 xxx.invokeFunction() 和 xxx.createInstance() 呢?
这是因为 vscode 实现了 ioc 的容器,也就是在这个容器内部的任意对象都可以声明依赖,然后由容器自动注入。
本来是直接依赖,但是通过反转成注入依赖的方式,就避免了耦合,这就是 ioc (invert of control)的思想,或者叫 di(dependency inject)。
这个 CodeApplication 就是 ioc 容器。
CodeApplication
//src/vs/code/electron-main/app.ts
export class CodeApplication {
// 依赖注入
constructor(
@IInstantiationService private readonly mainInstantiationService: IInstantiationService,
@IEnvironmentMainService private readonly environmentMainService: IEnvironmentMainService
){
super();
}
async startup(): Promise<void> {
const mainProcessElectronServer = new ElectronIPCServer();
this.openFirstWindow(mainProcessElectronServer)
}
private openFirstWindow(mainProcessElectronServer: ElectronIPCServer): ICodeWindow[] {
this.windowsMainService.open({...});
}
}
CodeApplication 里面通过装饰器的方式声明依赖,当通过容器创建实例的时候会自动注入声明的依赖。
startup 里面启动了第一个窗口,也就是渲染进程,因为主进程和渲染进程之间要通过 ipc 通信,所以还会创建一个 ElectronIPCServer 的实例(其实它只是对 ipc 通信做了封装)。
最终通过 windowMainService 的服务创建了窗口。
虽然比较绕,但是通过 service 和 ioc 的方式,能够更好的治理复杂度,保证应用的架构不会越迭代越乱。
然后我们来看具体的窗口创建逻辑。
windowMainService
//src/vs/platform/windows/electron-main/windowsMainService.ts
export class WindowsMainService {
open(openConfig): ICodeWindow[] {
this.doOpen(openConfig);
}
doOpen(openConfig) {
this.openInBrowserWindow();
}
openInBrowserWindow(options) {
// 创建窗口
this.instantiationService.createInstance(CodeWindow);
}
}
在 windowMainService 里面最终创建了 CodeWindow 的实例,这就是对 BrowserWindow 的封装,也就是 vscode 的窗口。(用 xxx.createIntance 创建是因为要受 ioc 容器管理)
CodeWindow
//src/vs/platform/windows/electron-main/window.ts
import { BrowserWindow } from 'electron';
export class CodeWindow {
constructor() {
const options = {...};
this._win = new BrowserWindow(options);
this.registerListeners();
this._win.loadURL('vs/code/electron-browser/workbench/workbench.html');
}
}
CodeWindow 是对 electron 的 BrowserWindow 的封装,就是 vscode 的 window 类。
它创建 BrowserWindow 窗口,并且监听一系列窗口事件,最后加载 workbench 的 html。这就是 vscode 窗口的内容,也就是我们平时看到的 vscode 的部分。
至此,我们完成了 electron 启动到展示第一个 vscode 窗口的逻辑,已经能够看到 vscode 的界面了。
总结
vscode 是基于 electron 做窗口的创建和进程通信的,应用启动的时候会跑主进程,从 src/main 开始执行,然后创建 CodeMain 对象。
CodeMain 里会初始化很多服务,然后创建 CodeApplication,这是 ioc 的实现,全局唯一。对象的创建由容器来管理,里面所有的对象都可以相互依赖注入。
最开始会先通过 windowMainSerice 服务来创建一个 CodeWindow 的实例,这就是窗口对象,是对 electron 的BrowserWindow 的封装。
窗口内加载 workbench.html,这就是我们看到的 vscode 的界面。
vscode 就是通过这样的方式来基于 electron 实现了窗口的创建和界面的显示,感兴趣的可以参考本文去看下 vscode 1.59.0 的源码,是能学到很多架构方面的东西的,比如 ioc 容器来做对象的统一管理,通过各种服务来管理各种资源,这样集中管理的方式使得架构不会越迭代越乱,复杂度得到了很好的治理,此外,学习 vscode 源码也能够提升对 electron 的掌握。