如何在本地构建和使用 xterm.js？

Question

我想对 xterm.js 的源代码做一些更改，并在进行 PR 之前对其进行测试。我未能成功生成工作 'distribution.'

（如果我的术语不正确，我深表歉意——我是网络开发的新手）

设置

我建立了一个简单的测试网站 index.html

<!doctype html>
  <html>
    <head>
      <script src="%PUBLIC_URL%/xterm.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
      <script>
        console.log(Terminal);
        var term = new Terminal();
        term.open(document.getElementById('terminal'));
        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
      </script>
    </body>
  </html>

在位置 %PUBLIC_URL% 我将放置一个 JS 源文件 xterm.js 来自：

node_modules/xterm/dist/xterm.js - 通过 npm
xterm.js/lib/xterm.js - 从 GitHub 存储库构建

为了构建 xterm.js 的本地副本，我采取了以下步骤：

git clone https://github.com/xtermjs/xterm.js.git xterm-local
cd xterm-local
npm install
npm run package

（注意：如果你在家里跟着我做，我无法在 Windows 或 Mac 上构建 xterm.js -- 我只能使用 Ubuntu 完成这些步骤18.04)

命令全部运行成功，最后一个命令创建 xterm-local/lib，其中包含 xterm.js。我用那个文件来替换可以从 NPM 安装中获得的副本。

结果

正常

使用 NPM 时 dist/xterm.js 我成功地看到我的终端元素呈现并且日志读取

ƒ Terminal(options) {
        this._core = new Terminal_1.Terminal(options);
        this._addonManager = new AddonManager_1.AddonManager();
    }

使用本地构建

当使用来自 xterm-local/lib/xterm.js 的本地构建输出时，没有呈现终端元素，出现错误：Uncaught TypeError: Terminal is not a constructor 并且日志显示为

{Terminal: ƒ, __esModule: true}
  Terminal: ƒ e(e)
  __esModule: true
  __proto__: Object

预期

我希望在构建 xterm.js 的本地副本后，我可以将其与 NPM 发行版互换使用。但是我很好奇为什么命令 npm run package 不生成 dist 文件夹而是生成 lib 文件夹。我是否缺少制作自己可用的 xterm.js 副本的其他步骤？

Answer 1

我已经找到了一个半可接受的解决方案，所以我想分享我能分享的。

这不是您要找的演示

感谢用户 Peter，我找到了 xterm.js' wiki page about contributing (not to be confused with the CONTRIBUTING.md file in the repo itself). It was hard to find because to an uninitiated individual this line in the repo's CONTRIBUTING.md 文档：

Get the xterm.js demo running.

似乎指的是可以在 xtermjs.org 上找到的演示，使用这些简单的说明：

First you need to install the module, we ship exclusively through npm so you need that installed and then add xterm.js as a dependency by running:

npm install xterm

To start using xterm.js on your browser, add the xterm.js and xterm.css to the head of your html page. Then create a onto which xterm can attach itself. Finally instantiate the Terminal object and then call the open function with the DOM object of the div.
    <head>
      <link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" />
      <script src="node_modules/xterm/dist/xterm.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
      <script>
        var term = new Terminal();
        term.open(document.getElementById('terminal'));
        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
      </script>
    </body>   </html> ```

然而情况并非如此。相反，他们谈论的是运行 xterm.js/demo

中的演示应用程序

运行真实演示

xterm.js 维护人员比我经验丰富得多。他们提供了如此之多 ways to build and run the demo 以致于令人望而生畏。尽管我不愿意向他们提供我的信用卡信息，但最终 SourceLair 选项对我有用。

首先创建一个 xterm.js repo 的分支 - 这很重要，因为您希望能够更改源代码！

尽管这 'shortcut' https://lair.io/xtermjs/xtermjs 可能很方便，但有点无济于事。您真正想要做的是转到 SourceLair，基于 您自己的 xterm 分支 创建一个新项目，然后选择预设的 'Node' 环境。这将允许您测试所做的更改（通过使用网络服务器工具）AND 保存您的更改（因为您使用自己的 fork 而不是使用上游 repo）

转到 SourceLair
通过克隆一个 repo 开始一个新项目
提供你的回购协议 URL
等待初始化（git 克隆、yarn 安装、webkit 编译等）
为您的更改创建一个新分支（在终端 git checkout -b [name_of_your_new_branch]）
进行更改
在项目Public URL中测试它们
提交您的更改并将其推送回您的存储库

（如果您想跳过使用网络编辑器，那么您可以更改您的存储库并将这些更改拉入 Source Lair 进行测试）

其他方法的挑战

仅供参考。

Docker：使用这个 pre-configured image 很容易，但是从容器中进行我需要的更改并不容易。
工头（Procfile 跑步者）：从没听说过他们...浪费的时间太少了（请注意，这是一种爱好！）
Linux / MacOSX：在 linux 上我可以构建但无法测试（我唯一的 linux 是 VPS我只是 SSH 进入）和 Mac 我可以（大概）测试但不能构建（因为在编写 node-gyp 依赖项时失败了）

Answer 2

如果您只需要运行看看感觉如何，请使用构建在 xtermjs

之上的 node-pty 包

https://github.com/microsoft/node-pty/tree/master/examples/electron

如何在本地构建和使用 xterm.js？

How to build and use xterm.js locally?

javascript

npm

xtermjs

设置

结果

正常

使用本地构建

预期

这不是您要找的演示

运行真实演示

其他方法的挑战

如何在本地构建和使用 xterm.js？

How to build and use xterm.js locally?

javascript

npm

xtermjs

设置

结果

正常

使用本地构建

预期

这不是您要找的演示

运行 真实演示

其他方法的挑战

运行真实演示