使用Theia——创建扩展包

Posted 2021-03-18

上一篇：使用Theia——构建你自己的IDE

创建Theia扩展包

　　本例中，我们将添加一个菜单项“Say hello”用来显示一个通知“Hello world!”。本文将指导你完成所有必要的步骤。

Theia的架构

　　Theia应用程序由所谓的扩展包（extensions）构成。一个扩展包提供一组特定功能的小部件、命令和处理程序等。Theia本身提供了一些扩展包，如编辑器、终端、项目视图等。每一个扩展包都属于它们各自的npm包。

　　Theia定义了大量的contribution接口，允许扩展包将功能添加到应用程序的各个部分。只需要按名称搜索*Contribution就可以找到这些接口。扩展包实现了这些contribution接口的具体功能。在本例中，我们将实现CommandContribution和MenuContribution。扩展包与Theia应用程序之间还可以通过各种services和managers来进行交互。

　　在Theia中，所有的东西都是通过依赖注入（Dependency Injection）的方式连接起来的。一个扩展包定义了一个或多个依赖注入模块。这些依赖注入模块就是绑定并实现contribution接口的地方，它们被列在扩展包的package.json文件中。扩展包可以用于前端，例如提供UI扩展，也可以用于后端，例如提供语言服务。当应用程序启动时，所有这些模块合并起来为前端和后端各自配置一个全局的依赖注入容器。然后在运行时通过多次注入的方式将这些特定类型的contributions收集起来。

必要条件

　　你需要安装node 10版本（译者：事实上最新的node稳定版即可）：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash
nvm install 10

　　以及yarn：

npm install -g yarn

　　还需要确保已安装python 2.x，可通过python --version来检查。

项目结构

　　我们将创建一个名为theia-hello-world-extension的monorepo（一个包含多个npm包的仓库），其中包含三个包：hello-world-extension，browser-app和electron-app。第一个即我们的扩展包，后两个是在浏览器和electron模式下运行我们扩展包的Theia应用程序。这里我们使用yarn而不是npm来安装，因为它可以在workspace中构造monorepo仓库的结构。在我们的示例中，每一个workspace都包含它们自己的npm包。这些包的公共依赖项通过yarn被“hoisted”到它们的公共根目录中。另外我们还将使用lerna跨workspace运行脚本。

　　为了简化每个仓库的设置，我们创建了一个代码生成器来帮助我们快速生成项目的脚手架。它也会生成hello-world示例，通过下面的命令运行：

npm install -g yo generator-theia-extension
mkdir theia-hello-world-extension
cd theia-hello-world-extension
yo theia-extension hello-world-extension

　　我们来看下生成的代码。根目录下的package.json文件中定义了workspaces、依赖项lerna以及一些用来给浏览器或electron构件本地包的scripts。

{
  "private": true,
  "scripts": {
    "prepare": "lerna run prepare",
    "rebuild:browser": "theia rebuild:browser",
    "rebuild:electron": "theia rebuild:electron"
  },
  "devDependencies": {
    "lerna": "2.4.0"
  },
  "workspaces": [
    "hello-world-extension", "browser-app", "electron-app"
  ]
}

　　同时也生成了lerna.json文件，用来配置lerna：

{
  "lerna": "2.4.0",
  "version": "0.1.0",
  "useWorkspaces": true,
  "npmClient": "yarn",
  "command": {
    "run": {
      "stream": true
    }
  }
}

实现扩展包

　　接下来看下hello-world-extension目录中我们的扩展包生成的代码。我们从package.json文件开始，它定义了包的元数据、对（最新的）Theia核心包的依赖项、一些脚本以及开发依赖项、还有theia-extensions。

　　keywords中的theia-extension非常重要：它允许Theia应用程序能够识别并从npm安装Theia扩展包。

{
  "name": "hello-world-extension",
  "keywords": [
    "theia-extension"
  ],
  "version": "0.1.0",
  "files": [
    "lib",
    "src"
  ],
  "dependencies": {
    "@theia/core": "latest"
  },
  "devDependencies": {
    "rimraf": "latest",
    "typescript": "latest"
  },
  "scripts": {
    "prepare": "yarn run clean && yarn run build",
    "clean": "rimraf lib",
    "build": "tsc",
    "watch": "tsc -w"
  },
  "theiaExtensions": [
    {
      "frontend": "lib/browser/hello-world-frontend-module"
    }
  ]
}

　　最后一个属性theiaExtensions，其中列出了一些javascript模块，这些模块导出了扩展包中定义的contribution的DI模块。本例中，我们只提供了一个前端功能（一个命令行和一个菜单项）。类似地，你也可以定义对后端的contribution，例如定义一个使用语言服务的language contribution。

　　在前端模块中，我们导出了一个默认对象，InversifyJS的ContainerModule，其中绑定了一个command contribution和一个menu contribution。

export default new ContainerModule(bind => {
    // add your contribution bindings here
    bind(CommandContribution).to(HelloWorldCommandContribution);
    bind(MenuContribution).to(HelloWorldMenuContribution);
});

　　Command被定义为一种简单的数据结构，其中包含id和label。id中包含了在command contribution中注册的处理程序，用来实现command的功能。代码生成器已经添加了一个command和一个处理程序，用于显示一个“Hello World!”的消息。

export const HelloWorldCommand = {
    id: ‘HelloWorld.command‘,
    label: "Shows a message"
};

@injectable()
export class HelloWorldCommandContribution implements CommandContribution {

    constructor(
        @inject(MessageService) private readonly messageService: MessageService,
    ) { }

    registerCommands(registry: CommandRegistry): void {
        registry.registerCommand(HelloWorldCommand, {
            execute: () => this.messageService.info(‘Hello World!‘)
        });
    }
}
...

　　请注意我们是如何在构造函数中使用@inject来获取MessageService的，以及如何在稍后的处理程序中使用它。这就是依赖注入优雅的地方：在客户端，我们并不关心这些依赖来自于何处，而且也不关心它们的生命周期。

　　为了能在UI层访问，我们需要实现MenuContribution，在菜单栏的edit菜单的Search/Replace部分添加一项。

...
@injectable()
export class HelloWorldMenuContribution implements MenuContribution {

    registerMenus(menus: MenuModelRegistry): void {
        menus.registerMenuAction(CommonMenus.EDIT_FIND, {
                commandId: HelloWorldCommand.id,
                label: ‘Say Hello‘
            });
    }
}

在浏览器中运行扩展包

　　现在来看看我们的扩展包是如何工作的。为此，生成器在browser-app目录中创建了一个package.json文件，定义了一个含有几个扩展包的Theia浏览器应用程序，其中包含了我们的hello-world-extension。目录中剩余的其它文件都是由yarn在构建过程中通过theia-cli工具自动生成的，如scripts部分中所定义的。

{
  "name": "browser-app",
  "version": "0.1.0",
  "dependencies": {
    "@theia/core": "latest",
    "@theia/filesystem": "latest",
    "@theia/workspace": "latest",
    "@theia/preferences": "latest",
    "@theia/navigator": "latest",
    "@theia/process": "latest",
    "@theia/terminal": "latest",
    "@theia/editor": "latest",
    "@theia/languages": "latest",
    "@theia/markers": "latest",
    "@theia/monaco": "latest",
    "@theia/typescript": "latest",
    "@theia/messages": "latest",
    "hello-world-extension": "0.1.0"
  },
  "devDependencies": {
    "@theia/cli": "latest"
  },
  "scripts": {
    "prepare": "theia build",
    "start": "theia start",
    "watch": "theia build --watch"
  },
  "theia": {
    "target": "browser"
  }
}

　　现在所有构建和运行应用程序需要的部分都准备好了，要运行它，输入下面的命令：

cd browser-app
yarn start <path to workspace>

　　然后在浏览器中输入http://localhost:3000，在打开的应用程序中选择Edit>Say Hello，你将会看到 “Hello World!”的消息弹出。

在Electron中运行扩展包

　　Electron应用程序中的package.json与浏览器应用程序中的类似，除了name和target属性不同。

{
  "name": "electron-app",
  ...
  "theia": {
    "target": "electron"
  }
}

　　在运行electron应用程序之前，你需要重新构建一些本地的模块：

yarn rebuild:electron
cd electron-app
yarn start <path to workspace>

部署扩展包

　　如果你想公开你的扩展包，我们建议你将它发布到npm。你可以通过在扩展包的目录中调用yarn publish来完成，当然前提是你需要一个有效的账户。

 

原文地址：https://theia-ide.org/docs/authoring_extensions