如何解决 Chrome 上的“AttachAddon 不是构造函数”错误？答案

【问题标题】：How to resolve 'AttachAddon is not a constructor' error on Chrome?如何解决 Chrome 上的“AttachAddon 不是构造函数”错误？
【发布时间】：2020-05-30 12:01:36
【问题描述】：

只是努力让 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，但这有什么不同吗？

在此先感谢

安迪

【问题讨论】：

插件是为 ES6 导入而制作的，因此不能与老式
非常感谢，我查看了链接并进行了一些更改，如上面编辑的第一篇文章所附。现在似乎拉入了模块，但 Chrome 控制台说 AttachAddon 不是由 xterm-addon-attach.js 模块导出的？非常感谢任何帮助。
你可以像以前一样使用普通的
@jerch 完美，非常感谢！

标签： xtermjs

【解决方案1】：

这对我有用。您唯一需要做的就是使用AttachAddon 两次，如下所示，使用OP 的示例。这是让它工作的唯一技巧。我也在使用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>

【讨论】：