使用Theia——创建扩展包

  • 时间:
  • 浏览:0
  • 来源:大发快3_快3计划网_大发快3计划网

上一篇:使用Theia——构建你此人 的IDE

创建Theia扩展包

  本例中,大家将去掉 三个小 多多菜单项“Say hello”用来显示三个小 多多通知“Hello world!”。本文将指导你完成所有必要的步骤。

Theia的架构

  Theia应用任务管理器由所谓的扩展包(extensions)构成。三个小 多多扩展包提供一组特定功能的小部件、命令和处理任务管理器等。Theia一种生活生活提供了一些扩展包,如编辑器、终端、项目视图等。每三个小 多多扩展包都属于它们各人的npm包。

  Theia定义了小量的contribution接口,允许扩展包将功能去掉 到应用任务管理器的各个每种。只都要按名称搜索*Contribution就能要能找到哪些地方地方接口。扩展包实现了哪些地方地方contribution接口的具体功能。在本例中,大家将实现CommandContributionMenuContribution。扩展包与Theia应用任务管理器之间还能要能通过各种servicesmanagers来进行交互。

  在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:

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

项目价值形式

  大家将创建三个小 多多名为theia-hello-world-extension的monorepo(三个小 多多饱含多个npm包的仓库),其饱饱含三个小 多多包:hello-world-extensionbrowser-appelectron-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:50,在打开的应用任务管理器中选者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

猜你喜欢

三星:西安存储芯片生产线二期投资规模尚未确定

北京时间5月17日晚间消息,据路透社报道,三星电子今日表示,关于在中国西安市建立第二条存储芯片生产线的投资规模,目前尚未选则。今日早些刚刚曾有报道称,三星半导体高端存储芯片二期

2020-02-17

云南迪庆部分道路禁行 应对金沙江堰塞湖引流泄洪

金沙江堰塞湖于12日夜晚至上午刚刚结束过流泄洪,云南省迪庆州为有效预防、科学除理上游来水这些造成的灾害,全力保障沿江人民群众生命财产安全,迪庆州香格里拉市政府及德钦县政府及时发

2020-02-17

波拉特VS伊基巴斯图特免费视频直播,波拉特VS伊基巴斯图特比赛集锦,波拉特VS伊基巴斯图特录像,波拉特VS伊基巴斯图特首发阵容

首页新闻视频直播数据APP懂球号直播君广告战略战略合作波拉特10-0518:00哈萨甲0-1已刚刚结速伊基巴斯图特直播君|分析|集锦暂无数据近期比赛亚眠法甲4-4巴黎圣日耳曼博

2020-02-17

WordPress 能帮助你建立哪些网站

或多或少或多或少人都听说过wordpress这个网站守护进程池池,都认为它是曾经博客的发布平台。事实上,wordpress的功能非常的强大愿意足够的灵活,都都后能 帮助你创建

2020-02-17

有心仪应用但还不想安装?微软Windows 10商店上线“愿望清单”

IT之家8月24日消息 一些一些购物、应用平台总要推出一种收藏功能,让用户必须将暂时还想要入手的物品、应用等加入你你这个列表中“待命”。现在,微软也终于在Windows10的M

2020-02-17