前面我们学习了如何把VSCode的开源项目在本地启动,今天我们看一下源码的结构,以及用到的技术,看一下内部是如何实现的。
一、技术介绍
VSCode 采用了 Electron,Electron是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用。使用的代码编辑器名为 Monaco Editor,开发语言呢,VSCode当然是使用了自己家的 TypeScript 语言啦。可能有很多人还不知道这些技术是干什么,下面来科普一下,不过不知道typeScript的前端同学,先自己自我反省一下哈。
1、Electron介绍
先来看一下官方是怎么介绍Electron:如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。这样是不是清楚Electron是干什么的了。
Electron 通过 BrowserWindow 可以创建一个本地窗口,并加载一个HTML文档,BrowserWindow中的内容就是一个浏览器窗口,不仅能创建DOM元素,同时能使用任意的Node模块,并且还可以通过IPC与主进程通讯。
2、编辑器 Monaco Editor
Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编写代码。移动浏览器或移动Web框架不支持Monaco编辑器。
3、typeScript 介绍
typeScript是javaScript的超集,遵循最新的 ES6、 Es5 规范。 TypeScript 从语言层面上扩展了JavaScript的语法。TypeScript是为大型应用开发而设计的,生产过程中可以保证安全性和兼容性。下面来介绍一下它的特点:
- 类型批注和编译时的类型检查
- 强类型语言
- 面向对象
- 类class
- 接口
- lambda函数
- 泛型
二、多进程
1、Electron主进程和渲染进程
Electron 运行package.json
的main
脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。
由于 Electron 使用了 Chromium 来展示 web 页面,所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。
在普通的浏览器中,web页面通常在一个沙盒环境中运行,不被允许去接触原生的资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。
2、Electron主进程和渲染进程之间的区别
主进程使用BrowserWindow
实例创建页面。 每个BrowserWindow
实例都在自己的渲染进程里运行页面。 当一个BrowserWindow
实例被销毁后,相应的渲染进程也会被终止。
主进程管理所有的web页面和它们对应的渲染进程。 每个渲染进程都是独立的,它只关心它所运行的 web 页面。
在页面中调用与 GUI 相关的原生 API 是不被允许的,因为在 web 页面里操作原生的 GUI 资源是非常危险的,而且容易造成资源泄露。 如果你想在 web 页面里使用 GUI 操作,其对应的渲染进程必须与主进程进行通讯,请求主进程进行相关的 GUI 操作。
3、vacode里的进程
- 主进程:VSCode里的主进程主要负责创建窗口和菜单,生命周期管理,自动更新等与系统相关的功能。
- 渲染进程:绝大多数代码都是运行在渲染进程中的,渲染进程负责界面的显示,响应用户操作。
- 插件进程:每一个渲染进程同时也对应一个插件进程,插件运行在单独的进程不会对渲染进程造成影响,
三、项目结构
├── build // gulp打包编译相关脚本
├── extensions // 内置插件
├── node_modules // 依赖模块
├── out // 编译输出目录
├── resources // 平台相关静态资源,图标等
├── script // 工具脚本,开发/测试
├── src // 源代码和素材(ts,js,css,svg,html等)
│ ├── typings // 常用模块定义
│ ├── vs
│ │ ├── base // 核心模块,常用库和基本组件
│ │ ├── editor // 编辑器模块
│ │ ├── code // VS Code主窗体相关
│ │ ├── platform // 核心功能接口定义和基本实现
│ │ ├── workbench // 业务逻辑功能实现
│ │ ├── loader.js // vscode loader
│ │ └── vscode.d.ts // 插件API定义
│ └── main.js // 主进程入口
├── gulpfile.js // gulp打包编译入口
├── product.json // 产品描述文件
└── package.json
其中业务相关的最关键的部分是:
src/vs/code:主窗体工具栏菜单创建
src/vs/editor:代码编辑器IDE核心相关
src/vs/workbench:UI布局功能服务对接
VS Code的源码部分就讲到这里了,里面各个模块之间的关系,以及代码的具体实现,大家可以去github上把源码clone下来,启动项目,自己了解一下。可以对照着Electron的文档。