使用Theia——建立擴展包

上一篇：使用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