使用Theia——创建扩展包

  • 时间:
  • 浏览:1
  • 来源:极速快3_快3诀窍_极速快3诀窍

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

创建Theia扩展包

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

Theia的架构

  Theia应用守护程序由所谓的扩展包(extensions)构成。有有3个多 多扩展包提供一组特定功能的小部件、命令和避免守护程序等。Theia一种提供了有些扩展包,如编辑器、终端、项目视图等。每有有3个多 多扩展包都属于它们其他人的npm包。

  Theia定义了几瓶的contribution接口,允许扩展包将功能添加到应用守护程序的各个偏离 。只须要按名称搜索*Contribution就都不需要 找到那些接口。扩展包实现了那些contribution接口的具体功能。在本例中,亲戚亲戚大家将实现CommandContributionMenuContribution。扩展包与Theia应用守护程序之间还都不需要 通过各种servicesmanagers来进行交互。

  在Theia中,所有的东西总要通过依赖注入(

Dependency Injection

)的措施 连接起来的。有有3个多 多扩展包定义了有有3个多 多或多个依赖注入模块。那些依赖注入模块只是绑定并实现contribution接口的地方,它们被列在扩展包的

package.json

文件中。扩展包都不需要 用于前端,类似提供UI扩展,也都不需要 用于后端,类似提供语言服务。当应用守护程序启动时,所有那些模块合并起来为前端和后端其他人配置有有3个多 多全局的依赖注入容器。只是在运行时通越来不多次注入的措施 将那些特定类型的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来检查。

项目特性

  亲戚亲戚大家将创建有有3个多 多名为theia-hello-world-extension的monorepo(有有3个多 多带有多个npm包的仓库),其中包蕴带有3个多 多包:hello-world-extensionbrowser-appelectron-app。第有有3个多 多即亲戚亲戚大家的扩展包,后有有3个多 多是在浏览器和electron模式下运行亲戚亲戚大家扩展包的Theia应用守护程序。这里亲戚亲戚大家使用yarn而总要npm来安装,可能它都不需要 在workspace中构造monorepo仓库的特性。在亲戚亲戚大家的示例中,每有有3个多 多workspace都带有它们自己的npm包。那些包的公共依赖项通过yarn被“hoisted”到它们的公共根目录中。另外亲戚亲戚大家还将使用lerna跨workspace运行脚本。

  为了比较复杂每个仓库的设置,亲戚亲戚大家创建了有有3个多 多

代码生成器

来帮助亲戚亲戚大家快速生成项目的脚手架。它也会生成

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"
    }
  ]
}

  最后有有3个多 多属性theiaExtensions,其中列出了有些JavaScript模块,那些模块导出了扩展包中定义的contribution的DI模块。本例中,亲戚亲戚大家只提供了有有3个多 多前端功能(有有3个多 多命令行和有有3个多 多菜单项)。类似地,你也都不需要 定义对后端的contribution,类似定义有有3个多 多使用语言服务的language contribution。

  在前端模块中,亲戚亲戚大家导出了有有3个多 多默认对象,

InversifyJS

ContainerModule

,其中绑定了有有3个多 多command contribution和有有3个多 多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的功能。代码生成器可能添加了有有3个多 多command和有有3个多 多避免守护程序,用于显示有有3个多 多“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目录中创建了有有3个多 多package.json文件,定义了有有3个多 多蕴带有哪几个扩展包的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:5000,在打开的应用守护程序中选则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来完成,当然前提有你在身边须要有有3个多 多有效的账户。

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

猜你喜欢

王者荣耀1月23日更新到几点 王者荣耀全服更新公告

斗玩网(douwan.com)报道:王者荣耀1月23日发布全服更新公告,此次王者荣耀更新到几点?更新了哪几种内容呢?感兴趣的网友视频一齐来看看吧。图片版权所属:站长之家亲爱的召

2020-01-29

球球大作战如何分身可以抵挡大球? 球球大作战分身可以抵挡大球攻略

关于亲戚亲戚亲们  |  加入亲戚亲戚亲们  |  意见反馈  |  招聘信息  |  媒体合作|  游戏库列表温馨提示,适度游戏益脑,沉迷游戏伤身,合理安排时间,享受健康生活

2020-01-29

李国庆谈996 李国庆说了这6点

4月12日,阿里巴巴创始人马云在实物会议上谈到目前争议性较大的问题图片996工作制,在当晚当当创始人李国庆也对996发表了一点人的看法,李国庆坚决反对996,表示真正的人才拼结

2020-01-29

dota自走棋单人模式地精流攻略 地精流打法汇总

dota自走棋须要单人模式,不少更钟爱单机玩法的玩家喜欢这个模式,这麼单人模式下的地精流要为什么会么会玩呢,这个人来一起看下单人模式地精流的攻略。开单机云模式打到了59波。除了

2020-01-29

2017回顾与2018目标

2017回顾与2018目标2018-01-2415:45 JoesWeek 阅读(...) 评论() 编辑 收藏2017年过去有段时间了,早就打算要写的总结拖到了现在。前段时间

2020-01-29