4

只是努力让 Attach 插件工作。主要的 xterm (4.4.0) 运行良好,但当我尝试引用插件时,Chrome 浏览器 Javascript 控制台会报告“未捕获的类型错误:AttachAddon 不是构造函数”。网络服务器是 golang/echo,我从包中拉入 xterm.js 和 xterm-addon-attach.js,如下所示:

<!doctype html>
  <html>
    <head>
      <link rel="stylesheet" href="xterm.css" />
      <script src="xterm.js"></script>
      <script src="xterm-addon-attach.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
      <script>

        var term = new window.Terminal();

        term.open(document.getElementById('terminal'));

        ws = new WebSocket('ws://example.net:8080/ws')

        const attachAddon = new AttachAddon(ws);
        term.loadAddon(attachAddon);

      </script>
    </body>
  </html>

谁能帮忙指出我做错了什么?

此外,我从中获取的文档中的示例没有 term.open() 调用,那么终端实例如何知道要附加到哪个元素?例如在https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-attach

提前谢谢了

安迪

更新:

我更改了 HTML 以包含导入语句,如下所示:

<!doctype html>
  <html>
    <head>
      <link rel="stylesheet" href="xterm.css" />
      <script src="xterm.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
      <script type="module"> 
        import { AttachAddon } from "./xterm-addon-attach.js";

        var term = new window.Terminal();

        term.open(document.getElementById('terminal'));

        ws = new WebSocket('ws://boundstone.dynamic-dns.net:8080/ws');

        const attachAddon = new AttachAddon(ws);
        term.loadAddon(attachAddon);

      </script>
    </body>
  </html>

但 Chrome 控制台现在报告:“请求的模块 './xterm-addon-attach.js' 不提供名为 'AttachAddon' 的导出”。网络服务器使用内容类型 application/javascript 为脚本提供服务,Chrome 控制台将 AttachAddon 的结构识别为 Webpack。

恐怕我不熟悉,因为我显然应该熟悉 JS 模块。我的项目的 Web 服务器不是(也不能是)Node,但这有什么不同吗?

提前谢谢了

安迪

4

1 回答 1

5

这对我有用。您唯一需要做的就是使用AttachAddonOP 的示例,如下所示使用两次。这是让它工作的唯一技巧。我也在使用fit插件,它也是一样的。

<!doctype html>


<html>
    <head>
      <link rel="stylesheet" href="xterm.css" />
      <script src="xterm.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
      <script> 

        var term = new window.Terminal();

        term.open(document.getElementById('terminal'));

        ws = new WebSocket('ws://boundstone.dynamic-dns.net:8080/ws');

        const attachAddon = new AttachAddon.AttachAddon(ws);
        term.loadAddon(attachAddon);

      </script>
    </body>
于 2021-03-13T15:55:04.257 回答