将 xterm.js 与插件一起使用：term-addon-attach

Question

我只想包含 xterm.js 和插件，它应该可以工作。但是我完全不知道如何在我的 index.html 中将附加 xterm-addon-attach 作为脚本导入。

他们提到通过 ES6 导入库，这给我带来了各种错误，例如：“在 xterm.js 中找不到“Terminal””。我将导入语句放在另一个 .js 文件中，并在我的 HTML 代码中使用 type="module" 属性获取它，但我得到了那个错误。

在这上面浪费了几个小时，恐怕这很容易做到，我只是遗漏了一些简单的东西。

任何人都可以帮助我了解如何解决这个问题并使用 xterm 和附加插件吗？单独使用 xterm 就可以了。

这是loadxterm.js：

import { Terminal } from './xterm.js';
//import { AttachAddon } from './xterm-addon-attach.js';

const webSocket = new WebSocket("ws://localhost:3000/websocket");

const terminal = new Terminal();
//const attachAddon = new AttachAddon(webSocket);
//terminal.loadAddon(attachAddon);

terminal.open(document.getElementById('terminal-container'));
terminal.write("hi!")

和 index.html:

<html>
  <head>
    <link rel="stylesheet" href="/static/xterm.css" />
    <script type="module" src="/static/loadxterm.js"></script>
    <script type="text/javascript">
      function getLog() {
        fetch("/run");
      }

      //      window.setInterval(function () {
      //       var elem = document.getElementById("content");
      //      elem.scrollTop = elem.scrollHeight;
      //  }, 5000);
    </script>
  </head>
  <body>
    <button onclick="javascript:getLog()">Run process!</button>
    <h3>Output</h3>
    <div id="container">
      <div id="content"></div>
    </div>
    <div id="terminal-container"></div>
  </body>
</html>

Answer 1

从 v4 开始，xterm.js 尚未在其捆绑包中公开 ES6 模块接口（计划用于 v5）。指南中提到的 import 在这方面有点误导（不想让你厌烦细节，只是这个 - 它解决了 Typescript 的导入，由于内部项目设置，它目前被转换为 require ).我承认指南可以更清楚这一点。

在 ES6 导出之前，bundle 实际包含什么？

顶层的好旧香草 JS 定义，因此它们旨在与普通 <script> 标签一起工作：

xterm.js 终端的主包暴露了 Terminal 构造函数，例如这应该有效：

<script type="text/javascript" src="path/to/xterm.js"></script>
...
<script type="text/javascript">
  const term = new Terminal(...);  // Terminal is now defined
</script>

xterm-addon-xy.js 单独的插件包在单独的命名空间下公开所有插件导出。命名空间名称与插件构造函数相同，例如：

<script type="text/javascript" src="path/to/xterm-addon-xy.js"></script>
...
<script type="text/javascript">
  // important: since v4 addons are classes,
  // to load an addon we need an instance
  const addonInstance = new XYAddon.XYAddon(...);
  const otherAddonStuff = XYAddon['something_else_exported_by_the_addon'];
  // load addon
  someTerminalInstance.loadAddon(addonInstance);
</script>

在您的特定问题中，这应该有效：

<script type="text/javascript" src="path/to/xterm.js"></script>
<script type="text/javascript" src="path/to/xterm-addon-attach.js"></script>
...
<script type="text/javascript">
  const term = new Terminal(...);
  const attachAddon = new AttachAddon.AttachAddon(new WebSocket(...), {bidirectional: true});
  term.loadAddon(attachAddon);
</script>

将 xterm.js 与插件一起使用：term-addon-attach

Using xterm.js with addon: term-addon-attach

html

javascript

xtermjs