Eclipse Theia 技术揭秘——构建桌面 IDE

在上一篇文章 Eclipse Theia 技术揭秘——初识 Theia 简单介绍了一下 Eclipse Theia 这套 IDE 平台，这篇文章介绍一下如何基于 Eclipse Theia 构建桌面 IDE。

Eclipse Theia Blueprint 介绍

首先我们先介绍一下 Eclipse Theia Blueprint 这套模板，它是用于构建基于 Eclipse Theia 平台的基于桌面的产品，以及展示 Eclipse Theia 功能。它由现有 Eclipse Theia 功能和扩展的子集组成，可以轻松下载并安装在所有主要操作系统平台上。大家可以去 https://theia-ide.org/docs/blueprint_download/ 下载体验一下，它也是开源的，可以在 Github 上参考其代码 https://github.com/eclipse-theia/theia-blueprint 。我们可以基于这套模板去定制我们的 IDE 产品。

下载

我们先下载 Github 的代码在本地运行一下。

$ git clone git@github.com:eclipse-theia/theia-blueprint.git

工程结构

然后我们打开工程看一下目录结构。

在最外层目录组织结构中可以看到整个工程使用 Lerna 配置 mono-repo 构建，applications 下存放不同端的产品工程，比如当前 electron 包含应用到打包、打包配置和电子目标的 E2E 测试。theia-extensions 下存放自定义的 Theia 扩展包，其中 theia-blueprint-product 包含当前自定义产品品牌的 Theia 扩展（关于对话和欢迎页面），theia-blueprint-updater 包含更新机制和相关界面的 Theia 扩展。

接下来看一下 applications 下 electron 包中的内容。

• resources：electron 打包常用一些资源，像应用的图标。

• scripts：存放打包使用的脚本，像签名应用程序的脚本。

• test：存放测试脚本

• electron-builder.yml：electron-builder打包的配置文件

• webpack.config.js：webpack 的相关配置

然后我们再安装一下依赖

$ yarn

安装依赖之后会执行 package.json 中的 prepare 脚本，我们来看一下。

prepare 脚本会执行 yarn build 和 yarn download:plugins，这两个脚本最终会执行 theia rebuild:electron、theia build 和 theia download:plugins。theia 这个命令是来自 devDependencies 配置的 @theia/cli。

执行完成后会发现 electron 工程下新增了一些文件。

• lib：构建生成的 Bundle 包

• plugins：执行 download:plugins 时下载的插件包

• src-gen：theia 命令自动生成的工程文件

• gen-webpack.config.js：theia 自动生成的 webpack 配置文件，由 webpack.config.js 引入

运行

我们在工程根目录下执行

$ yarn electron start

启动后界面如下

打包

$ yarn electron package

执行完命令后，在 electron 目录下 dist 中生成安装包文件，windows 是.exe 安装程序，mac 是.dmg 安装程序。

预览

$ yarn electron package:preview

这个命令可以生成安装后的绿色版应用程序，可以直接打开不需安装。

以上就是 Theia Blueprint 提供的一些构建命令。

看完觉得对您有所帮助别忘记关注呦