我们在package.json里能找到他的入口文件;
代码语言:javascript复制"main": "./out/main",
electron是分主进程和渲染进程的; 渲染进程是主进程启动的; ./out/main.js显然这就是主进程的入口程序; 确实不假 但别着急去分析这个文件; 因为它是在out目录下,明显是什么东西输出出来的; 我们先打扫一遍src目录下的东西; 发现了tsconfig.json
代码语言:javascript复制"outDir": "../out",
哈,这是typescript代码,编译后输出到./out/目录下的; 那么我们来看src下的main.js 分析代码最主要的就是目的明确,我们的目的是看看他的启动逻辑(主窗口是怎么打开的) 无关的东西先不管,要不然很容易迷失...; 我们在main.js里找electron的ready事件
代码语言:javascript复制app.once('ready', function () {
if (args['trace']) {
// @ts-ignore
const contentTracing = require('electron').contentTracing;
const traceOptions = {
categoryFilter: args['trace-category-filter'] || '*',
traceOptions: args['trace-options'] || 'record-until-full,enable-sampling'
};
contentTracing.startRecording(traceOptions, () => onReady());
} else {
onReady();
}
});
先去看onReady方法 onReady里主要就是执行这个方法:
代码语言:javascript复制const startup = nlsConfig => {
nlsConfig._languagePackSupport = true;
process.env['VSCODE_NLS_CONFIG'] = JSON.stringify(nlsConfig);
process.env['VSCODE_NODE_CACHED_DATA_DIR'] = cachedDataDir || '';
// Load main in AMD
perf.mark('willLoadMainBundle');
require('./bootstrap-amd').load('vs/code/electron-main/main', () => {
perf.mark('didLoadMainBundle');
});
};
到这里,我们先看看bootstrap-amd都干了啥 发现他其实调用了/vs/loader里的方法(下面这行代码里面entrypoint就是:vs/code/electron-main/main)
代码语言:javascript复制loader([entrypoint], onLoad, onError);
loader是微软自家的AMD模块加载开源项目:https://github.com/Microsoft/vscode-loader/ 没啥好说的,我们接着来看vs/code/electron-main/main.ts的代码, 发现它一开始就加载了一大堆模块,头大! 先不管它加载的这些模块都是干嘛的,我们看它本身的入口,代码拉到末尾,发现:
代码语言:javascript复制 const code = new CodeMain();
code.main();
马上去看这个模块的main函数;发现main函数对于我们唯一有用的就是:
代码语言:javascript复制this.startup(args);
这个函数启动了一堆服务之后,就执行了:
代码语言:javascript复制const mainIpcServer = yield this.doStartup(logService, environmentService, lifecycleService, instantiationService, true);
和
代码语言:javascript复制return instantiationService.createInstance(CodeApplication, mainIpcServer, instanceEnvironment).startup();
我们先看第一行,在doStartup里,只有这行代码看起来有用:
代码语言:javascript复制server = await serve(environmentService.mainIPCHandle);
serve是上面加载的那一大堆模块之一:vs/base/parts/ipc/node/ipc.net 发现它的serve其实就是启动了一个服务:
代码语言:javascript复制 function serve(hook) {
return new Promise((c, e) => {
const server = net_1.createServer();
server.on('error', e);
server.listen(hook, () => {
server.removeListener('error', e);
c(new Server(server));
});
});
}
对我们目前的分析,帮助不大! 我们再返回头看第二行代码: instantiationService.ts在vs/platform/instantiation/common/instantiationService.ts 他的createInstance是个工厂函数,第一个参数是类型(或构造函数),后面的参数都是这个类型的构造函数所需要的参数。 那么我们主要看第一个参数CodeApplication,这个类型的代码在这里:vs/code/electron-main/app.ts 我们找到CodeApplication的startup方法,看到这一句:
代码语言:javascript复制// Open Windows
const windows = appInstantiationService.invokeFunction(accessor => this.openFirstWindow(accessor, electronIpcServer, sharedProcessClient));
这应该就是我们找的启动主窗口的方法了,跟进去看看: 一开始是一大堆IPC通信相关的代码(主线程和渲染线程通信的代码) 之后创建了IWindowsMainservice的实例
代码语言:javascript复制const windowsMainService = this.windowsMainService = accessor.get(IWindowsMainService);
然后用这个实例创建了窗口
代码语言:javascript复制 return windowsMainService.open({
context,
cli: args,
forceNewWindow: args['new-window'] || (!hasCliArgs && args['unity-launch']),
diffMode: args.diff,
noRecentEntry,
waitMarkerFileURI,
initialStartup: true
});
IWindowsMainservice接口具体实例的类型是WindowsManager(可以在app.ts文件中找到下面的代码)
代码语言:javascript复制services.set(IWindowsMainService, new SyncDescriptor(WindowsManager, [machineId, this.userEnv]));
(IWindowsMainservice接口的描述文件在这里:vsplatformwindowselectron-mainwindows.ts) WindowsManager在vs/code/electron-main/windows.ts文件中定义, 那我们去看看WindowsManager的open方法,发现了:
代码语言:javascript复制const usedWindows = this.doOpen(openConfig, workspacesToOpen, foldersToOpen, emptyToRestore, emptyToOpen, fileInputs, foldersToAdd);
好,再去看doOpen,发现最后的:
代码语言:javascript复制 // Finally, if no window or folder is found, just open the files in an empty window
else {
usedWindows.push(this.openInBrowserWindow({
userEnv: openConfig.userEnv,
cli: openConfig.cli,
initialStartup: openConfig.initialStartup,
fileInputs,
forceNewWindow: true,
remoteAuthority: fileInputs.remoteAuthority,
forceNewTabbedWindow: openConfig.forceNewTabbedWindow
}));
// Reset these because we handled them
fileInputs = undefined;
}
注意:这两个方法有一个重要的逻辑就是:如果已经有一个窗口了,那么就用现成的窗口打开目录(或文件) 再去看openInBrowserWindow
代码语言:javascript复制// Create the window
window = this.instantiationService.createInstance(CodeWindow, {
state,
extensionDevelopmentPath: configuration.extensionDevelopmentPath,
isExtensionTestHost: !!configuration.extensionTestsPath
});
它创建了一个CodeWindow的实例,这个类型在:vs/code/electron-main/window.ts中定义 这个类型的构造函数里调用了这个方法:
代码语言:javascript复制this.createBrowserWindow(config);
在这个方法里完成了窗口的创建:
代码语言:javascript复制// Create the browser window.
this._win = new BrowserWindow(options);
至此:VSCode窗口创建出来了