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

Answer 1

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

在 ES6 导出之前，捆绑包实际上包含什么？

顶级的旧 vanilla JS 定义，因此它们适用于普通<script>标签：

• xterm.jsTerminal暴露构造函数 的终端的主包，例如这应该工作：

  <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>