乐趣区

关于前端:Eclipse-Theia技术揭秘初识Theia

jiezi

概述

自从接触 IDE 这方面的技术以来，始终关注其余厂商是如何做 IDE 的，刚开始理解 IDE 是从微信、百度、支付宝等这些开发者工具晓得这些开发者工具是基于 electron 或 NW.js 去构建的，然而从头开始写老本比拟高。起初也看了一些其余的 IDE，像 Weex Studio、白鹭 Egret Wing、快利用 IDE、APICloud Studio 这类的是基于 VSCode 源码定制的，技术绝对成熟，大部分性能现成的，工作量绝对较少，于是就基于 VSCode 去定制了第一版的开发工具，详情能够看之前写的 VSCode 技术揭秘。直到前面理解到 Theia 这个框架，发现款式和性能与 VSCode 差不多，而且也局部反对 VSCode 的插件，最次要是可能通过扩大的模式去丰盛 IDE 的视图性能，与 VSCode 批改 UI 源码相比，Theia 的形式更加好用，只不过前提是要对 Theia 的源码有所理解才能够去定制，所以过后就把 Theia 作为 IDE 的次要钻研方向。

总体架构

Theia 被设计成一个桌面应用程序，也能够在浏览器和近程服务器的环境中工作。为了反对这两种状况，Theia 在两个独自的过程中运行。这些过程别离称为前端和后端，它们通过 WebSocket 上的 JSON-RPC 音讯或 HTTP 上的 REST API 进行通信。对于 Electron，后端和前端都在本地运行，而在近程上下文中，后端将在近程主机上运行。前端和后端过程都有它们的依赖注入（DI）容器不便扩大性能。

扩大

Theia 是以一种十分模块化和可扩大的形式设计的。它反对以下三种扩大形式，相比 VSCode 只反对插件扩大而言，可定制化的成都更高。

  • VSCode 扩大：易于编写，可在运行时装置。Theia 提供了与 VSCode 雷同的扩大 API，因而扩大是兼容的。因而，要开发本人的扩大，请参考 VSCode 扩大文档。也能够应用 Theia 中现有的 VSCode 扩大，能够从 Open VSX registry 装置或下载扩大。
  • Theia 扩大：Theia 扩大是在 Theia 应用程序内并间接与其余模块通信的模块（Theia 扩大）。Theia 我的项目自身也由 Theia 扩大组成。要创立 Theia 应用程序，您能够抉择 Theia 我的项目提供的大量 Theia 扩大（外围扩大），增加本人的自定义 Theia 扩大，而后编译并运行后果。您的自定义 Theia 扩大将能够拜访与外围扩大雷同的 API。这种模块化容许您依据本人的需要扩大、调整或删除 Theia 中的简直任何内容。此外，与 VSCode 扩大相比，应用 Theia 扩大开发特定用例（如简单视图）更容易。从技术上讲，扩大是一个 npm 包，它公开了有助于创立 DI 容器的任意数量的 DI 模块（ContainerModule）。扩大通过在 package.json 中申明依赖项来应用，并在编译时装置。
  • Theia 插件：Theia 插件是一种非凡类型的 VSCode 扩大，只在 Theia 中运行。它们共享 VSCode 扩大的体系结构和其余属性，但它们也能够拜访仅在 Theia 中可用的附加 API，而不在 VSCode 中可用。最值得注意的是，Theia 插件也能够间接用于前端，而 VS 代码扩大仅限于后端。因而，Theia 插件能够间接操作 UI，而无需通过 webview 形象，从而简化了开发过程。

下图显示了所有三个选项的高级体系结构。VSCode 扩大和 Theia 插件运行在一个专用过程中，能够在运行时装置，并针对定义的 API 工作。Theia 扩大在编译时增加，并成为 Theia 应用程序的外围局部。他们能够拜访 Theia 的残缺 API。

VSCode 与 Theia 区别

  • 保护：VSCode 是 MIT 协定，基本上属于微软公司。Theia 是 EPL 协定，由 Eclipse Theia 基金委员会主导，可用于商业用途。
  • 插件市场：VSCode 有本人独立的插件市场，插件丰盛，但只能装置到 VS Code 中。Theia 仅反对从 openVSX 插件市场中下载，实际上是反对 VS Code 插件，但因为 VS Code 插件市场的限度，无奈齐全应用 VS Code 插件，只能由插件开发者将插件托管到 openVSX 上才行，所以插件数量小于 VS Code。

  • 插件开发：VS Code 提供扩大注册命令、菜单、视图、语言服务器等相干性能，目前只能通过 VS Code 提供的 API 进行扩大，无奈更换 logo，移除默认菜单、命令，创立简单视图等性能。而 Theia 其实提供了两种插件机制，一种是相似于 VS Code 的插件开发机制，Plugin，它依赖于 Theia 提供的 API 进行插件开发，用户可在 IDE 运行时进行插件的装置、卸载。另外一种是 extension，这是间接构建在了咱们工具当中，用户无奈进行批改，它能够拜访 Theia 外部的所有办法，咱们能够对 Theia 所有的性能进行个性化开发。这种插件开发的毛病是，对开发人员要求相对而言比拟高，须要理解 Theia 的外部机制，现有文档基本上也无奈满足高定制化的开发需要。

    环境搭建

    刚开始钻研 Theia 的时候版本是 1.11.0，那时候绝对环境问题比拟多，windows 兼容性也有，文档不全面等各种问题，不过当初文档绝对全面一点，环境问题能够看这篇文章 Windows 下运行 Eclipse Theia 源码指南绝对具体一些。

接下来咱们钻研 Theia 那必定先把官网我的项目运行起来，咱们能够学习一下官网文档 Eclipse Theia 文档，如果文档拜访不了能够查看文档的 github 源码 https://github.com/eclipse-theia/theia-website。当然咱们也能够查看疾速入门，留神这外面的根底环境：

  • Node.js >= 14.18.0，举荐应用 Node 的 LTS：目前是 16.x
  • Yarn package manager >= 1.7.0 AND < 2.x.x
  • git (If you would like to use the Git-extension too, you will need to have git version 2.11.0 or higher.)
  • python3，因为须要[email protected]

而后就拉取代码，装置依赖，在这里如果装置依赖很慢甚至报错，基本上是网络问题，能够翻墙去下载，也能够在我的项目根目录下增加.npmrc 配置帮忙疾速装置。

chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
operadriver_cdnurl=http://npm.taobao.org/mirrors/operadriver
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ 
puppeteer_skip_chromium_download = 1

这里介绍一下 windows 环境的配置。

python3 版本为 Python 3.6 或更高版本

Visual Studio 构建工具 17，构建工具能够参考 Windows 下运行 Eclipse Theia 源码指南这篇文章。

如果装置了多个版本的 python 或 Visual Studio，能够通过 npm config 调整应用的版本。

npm config set python /path/to/executable/python --global
npm config set msvs_version 2017 --global

装置 windows-build-tools，以前，windows-build-tools 在 Windows 上构建 Native Nodes 模块是必须的。npm 包当初是 deprecated 因为 NodeJS 安装程序当初能够装置它须要的所有必须工具，包含 Windows 构建工具。

咱们应用管理员身份关上 PowserShell，而后运行命令装置

npm --add-python-to-path install --global --production windows-build-tools

这样咱们的环境配置实现。

构建本人的 IDE 工具

Theia 官网文档提供了两种构建基于 Theia 的产品形式：

  • Theia Extension Yeoman 生成器：生成基于 Theia 的产品以及示例扩大
  • Theia Blueprint：用于创立基于 Theia 的可装置桌面应用程序的模板工具
    这两种形式会生成配置好的 Theia 工程，不须要本人去从新搭建。

当然官网文档介绍了从零配置 Theia 工程的步骤。首先创立一个工程目录

$ mkdir theia-demo
$ cd theia-demo

而后在工程根目录创立 package.json

{
    "private": true,
    "dependencies": {
      "@theia/callhierarchy": "next",
      "@theia/file-search": "next",
      "@theia/git": "next",
      "@theia/markers": "next",
      "@theia/messages": "next",
      "@theia/navigator": "next",
      "@theia/outline-view": "next",
      "@theia/plugin-ext-vscode": "next",
      "@theia/preferences": "next",
      "@theia/preview": "next",
      "@theia/search-in-workspace": "next",
      "@theia/terminal": "next",
      "@theia/vsx-registry": "next"
    },
    "devDependencies": {"@theia/cli": "next"},
    "scripts": {
      "prepare": "yarn run clean && yarn build && yarn run download:plugins",
      "clean": "theia clean",
      "build": "theia build --mode development",
      "start": "theia start --plugins=local-dir:plugins",
      "download:plugins": "theia download:plugins"
    },
    "theiaPluginsDir": "plugins",
    "theiaPlugins": {"vscode-builtin-extensions-pack": "https://open-vsx.org/api/eclipse-theia/builtin-extension-pack/1.50.1/file/eclipse-theia.builtin-extension-pack-1.50.1.vsix"},
    "theiaPluginsExcludeIds": [
      "vscode.extension-editing",
      "vscode.git",
      "vscode.git-ui",
      "vscode.github",
      "vscode.markdown-language-features",
      "vscode.microsoft-authentication"
    ]
  }

其中能够看到 Theia 外围依赖都是一个一个的扩大包，@theia/cli 列为构建时依赖项。它提供脚本来构建和运行应用程序。其中还有一些其余配置项。

  • theiaPluginsDir：部署插件的相对路径
  • theiaPlugins：要下载的插件汇合（单个插件或扩大包）– 能够指向任何无效的下载 URL（例如：Open VSX、Github Releases 等）
  • theiaPluginsExcludeIds：解析扩大包时要排除的插件列表

而后装置依赖包

yarn

而后，应用 Theia CLI 构建应用程序

yarn theia build

yarn 在咱们的应用程序的上下文中查找由 theia 提供的可执行文件 @theia/cli，而后 build 应用 theia. 这可能须要一段时间，因为默认状况下应用程序是在生产模式下构建的，即通过混同和放大。当然咱们也能够应用 yarn build 调用 scripts 脚本。

构建实现后，咱们调用命令来启动。

yarn theia start --plugins=local-dir:plugins

也能够调用 yarn start 来执行 scripts 脚本。

启动后默认运行在 3000 端口上，而后关上浏览器能够看到运行起来的 Theia IDE。

咱们也能够启动的时候指定特定网络和端口。

yarn start --hostname 0.0.0.0 --port 8080

以上是咱们简略启动一个 Theia 的工程，作为一个 WEB IDE 在浏览器中拜访，后续咱们会介绍如果开发一个桌面客户端版的 IDE。

相干源码

openvsx
theia-apps
theia

参考源码

因为文档内容比拟欠缺，能够参考其余定制 Theia 的代码。

che-theia
Mbed Studio
Arduino IDE

参考文章

KAITIAN IDE 是如何构建扩大能力极强的插件体系的？
为将来研发模式而生，KAITIAN IDE 在业务中的摸索
前端工程下一站 IDE
基于 KAITIAN 的前端工程研发模式改革
跑在浏览器上的小程序 IDE
基于 React 打造高自由度的 IDE 布局零碎
Tide 研发平台 · 布局研发新基建
如何在团队内疾速落地 WebIDE
咱们开源了一个轻量的 Web IDE UI 框架
阿里 & 蚂蚁自研 IDE 研发框架 OpenSumi 正式开源
云端 IDE 根底框架介绍—ECLIPSE THEIA——兆松科技

其余 IDE 产品

Molecule
KAITIAN

退出移动版