关于前端: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 [email protected]: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 提供的一些构建命令。