文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在本地构建和使用xterm.js？

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

Stack Overflow用户

提问于 2019-09-03 17:55:54

回答 2查看 10.9K关注 0票数 4

我想对xterm.js的源代码做一些修改，并在做公关之前对它们进行测试。我没有成功地生成一个工作的‘分配’。

(抱歉，如果我的术语不正确-我对web开发非常陌生)

设置

我用下面的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 --我只使用Ubuntu18.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副本？

npm

xtermjs

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-09-07 23:55:01

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

这不是你要找的演示

多亏了用户Peter，我找到了通往xterm.js‘关于贡献的页面的方法(不要把它与回购中的CONTRIBUTING.md文件混淆起来)。很难找到，因为对于一个不熟悉的人来说，在回购公司的CONTRIBUTING.md文档中这一行：

让xterm.js演示运行。

似乎参考了在xtermjs.org上可以通过以下简单说明找到的演示：

首先您需要安装模块，我们专门通过npm发布，因此您需要安装该模块，然后通过运行以下命令将xterm.js作为依赖项添加： npm install xterm 要开始在浏览器上使用xterm.js，请将xterm.js和xterm.css添加到html页面的顶部。然后创建一个xterm可以自己附加到的对象。最后实例化终端对象，然后使用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> ``` 的DOM对象调用open函数。

然而，，，情况并非如此。相反，他们正在谈论运行生活在xterm.js/demo中的演示应用程序。

运行真正的演示

xterm.js维护人员比我更有经验。他们提供了如此多的构建和运行演示的方法，可能会令人望而生畏。最终，尽管我不愿给他们我的信用卡信息，SourceLair的选择还是为我工作了。

首先，做一个分叉的xterm.js回购 -这是很重要的，因为你想要能够改变源代码！

虽然它很方便，但这种“捷径”https://lair.io/xtermjs/xtermjs并不能帮上忙。您真正想要做的是去SourceLair，基于您自己的xterm叉创建一个新项目，并选择预设的'Node‘环境。这将使您既可以测试您所做的更改(通过使用web服务器工具)，又可以保存您的更改(因为您使用了自己的分支而不是使用上游回购)。

转到SourceLair
通过克隆回购开始一个新项目
提供您的回购URL
等待初始化(git克隆、纱线安装、webkit编译等)
为您的更改创建一个新分支(在终端git checkout -b [name_of_your_new_branch]中)
做你的改变
在项目的公共URL中测试它们
提交并将您的更改推回您的回购

(如果您想跳过使用web编辑器，那么您可以对您的回购进行更改，并将这些更改拖到Source进行测试)

其他方法的挑战

只是一场比赛。

Docker:使用这个预配置图像很容易，但在容器中进行所需的更改并不容易。
福尔曼:从来没有听说过他们.时间太少，不能浪费(这是一种爱好，请注意！)
Linux / MacOSX:在linux上，我可以构建但不能测试(我唯一的linux是我刚刚进入的VPS )，在Mac上我可以(大概)测试但不能构建(因为在编写节点-gyp依赖关系时失败了)。

票数 3

Stack Overflow用户

发布于 2020-06-22 14:30:24

如果您所需要的只是运行并查看它的感觉，请使用构建在xtermjs之上的node-pty包

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

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57776633

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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