前言
@theia/core 是一款用于构建现代 Web 应用程序的开源框架，它基于 TypeScript 和 VS Code 构建，帮助开发者快速构建高质量的 Web 应用程序。
该框架提供了许多强大的功能和工具，例如：面向对象的容器和依赖注入、通用命令和菜单系统、多个面板和编辑器集成、多个工作区域等。该框架还支持多种编程语言、扩展系统和集成第三方插件。
在本文中，我们将对如何使用 @theia/core 进行详细讲解，并提供一些示例代码，以帮助读者更好地理解该框架的使用方法。
安装和配置
安装
首先，我们需要安装 @theia/core 包。可以通过 npm 包管理工具进行安装：
npm install --save @theia/core
配置
安装完毕后，我们需要进行配置以确保 @theia/core 正确运行。最基本的配置包括创建一个应用程序和构建一个扩展。
创建应用程序
要创建一个应用程序，我们需要创建一个包含以下内容的文件：
-- -------------------- ---- ------- -- ------------------ ------ - --------- - ---- --------------------------- ------ - ----------- - ---- ------------------------------ ----- --------- - --- ------------ ----- ----------- - --------------------------- --------------------
在此示例中，我们导入 Container 和 Application 对象，并使用 Container 对象创建一个应用程序对象，最后调用 start() 方法以启动应用程序。
构建扩展
扩展是 @theia/core 框架的核心。我们可以使用扩展来添加新的工作区组件、菜单项、命令和定制主题。
扩展通常包含以下组件：
- Contributes：描述应该添加到工作区中的菜单项、命令和主题
- Frontend：用于在前端（浏览器）中呈现数据和控制 UI 的代码
- Backend：用于在后端（服务器）中处理数据和管理插件的代码
创建扩展的步骤如下：
- 创建扩展目录 structure
首先，我们需要创建一个名为 my-extension 的新目录来存储扩展：
$ mkdir my-extension
- 初始化 npm 项目
接下来，我们需要在新目录中初始化 npm 项目。可以通过以下命令执行初始化：
$ cd my-extension $ npm init
npm init 命令将在当前目录中创建一个 package.json 文件，其中包含有关扩展的基本信息，例如名称、版本和描述。
- 添加 @theia/core 依赖
现在，我们需要将 @theia/core 依赖添加到扩展项目中。
$ npm install --save @theia/core
此命令将添加 @theia/core 包作为扩展项目的依赖项。
- 创建扩展结构目录
我们需要在新目录中创建以下目录结构：
- my-extension - frontend - backend - package.json
其中，frontend 目录用于存储用于呈现 UI 的代码，backend 目录用于存储用于处理数据的代码。
- 添加到应用中
为了将新扩展添加到应用程序中，我们需要编辑 src/application.ts 文件并添加以下代码：
-- -------------------- ---- ------- -- ------------------ ----- --------- - --- ------------ ----- ----------- - --------------------------- -- ------ ------ ----------------------------------------------------- ------ ------------------------------------------------------- --------------------
示例代码
下面是一个示例代码，用于在浏览器中呈现一个按钮并在单击按钮时显示一条消息。
- 创建新项目并安装依赖项：
$ mkdir my-extension $ cd my-extension $ npm init -y $ npm install --save @theia/core
- 创建目录结构：
$ mkdir backend frontend $ touch package.json
- 创建菜单：
-- -------------------- ---- -------
-- ----------------------------------------
------ - --------------- - ---- ------------
------ - -------------------- ---------------- - ---- -------------------------
------ - ----------- - ---- --------------------------
------ ------- --- -------------------- -- -
----------------------------------------
----------------------------------
---
----- --------- ---------- ------------------- -
-------------------------- ---------------------------------------------------------- ---- -
--------------------------
--- -------------
------ --- --------
---
-
-
----- ------ ---------- ---------------- -
-------------------- --------------------------------------------------------- ---- -
----------------------------------------------- -
---------- -------------
------ ---- ------
---
-
-- 创建按钮：
-- -------------------- ---- -------
-- ---------------------
------ ----- ---- --------
------ - ---------- - ---- ------------
------ - ----------- - ---- --------------------------
-------------
------ ----- -------------- ------- ----------- -
--------- ------------------ -
------ -
------- ------------------------------ --------------
--
-
-------------- ---- -
------------ ---- ------------------
-
-- 在应用程序中加载新的扩展：
-- -------------------- ---- -------
-- ------------------
------ - ---------- --------------- - ---- ------------
------ - ------------ ------ - ---- ------------------------------
------ -------------------
-- ------
------ ------------------------- ---- ------------------------------------------
----- -------- ----------------- - -
-- ------
-------------------------
--
----- --------- - --- ------------
---------------------------
----- --- - --- -------------
---------
---
------------- 运行应用程序：
$ npm run start
在浏览器中访问 http://localhost:3000，您将看到一个新的菜单项和一个按钮。单击按钮将显示一条消息。
总结
在本文中，我们介绍了如何使用 @theia/core 框架来构建现代 Web 应用程序。我们详细讲解了框架的安装和配置方法，并提供了示例代码以帮助读者更好地理解该框架的使用方法。希望读者在阅读本文后能够在自己的项目中进行应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/sensics-core