如何将 xterm.js 与 Meteor 一起使用答案

【问题标题】：How to use xterm.js with Meteor如何将 xterm.js 与 Meteor 一起使用
【发布时间】：2017-01-16 09:37:09
【问题描述】：

我正在尝试在我的 Meteor 应用程序中使用 xterm.js，但我无法使其正常工作，因为我得到了 Terminal is not defined。

我在客户端的 main.html 中使用这样的 xterm：

<script src="../imports/ui/xterm.js"></script>
        <div id="terminal"></div>
             <script>
               var term = new Terminal();
               term.open(document.getElementById('#terminal'));
               term.write('Hello from \033[1;3;31mxterm.js\033[0m $ ')
             </script>

并且 xterm 被导入，因为如果我查看终端，我可以看到：

有人已经将 xterm.js 与 Meteor 一起使用，并且可以让我走上正轨吗？

【问题讨论】：

标签： javascript meteor xtermjs

【解决方案1】：

这种方式是行不通的。您需要在client/main.js 文件中导入该文件并在之后使用它的功能：

客户端/main.js：

import '../imports/ui/xterm.js';

Meteor.startup(() => {
  var term = new Terminal();
  term.open(document.getElementById('#terminal'));
  term.write('Hello from \033[1;3;31mxterm.js\033[0m $ ')
});

记得去掉main.html文件中的两个脚本标签。

更新：如果还是不行，那么让xterm.js文件移动到client/compatibility/xterm.js，并删除上面代码中的import语句。

【讨论】：

当我这样做时，我在开发控制台中看不到 xterm.js，我仍然遇到同样的错误
xterm.js 文件，你是怎么得到的？你能确保它在浏览器上工作吗？也许让我们尝试将其添加到静态 html 文件中，看看它是否有效
如果我执行 localhost/js/xterm.js，该文件会显示在我的浏览器上。（是的，我移动了 xterm.js，但我也用你的回答做了）。我通过复制 repo 并在我的项目中移动 dist/xterm.js 得到它
现在我有TypeError: Terminal is not a constructor
好的，现在它“工作”了，我没有错误，并且显示了一些东西，但它非常难看，我敢肯定这不是应该的，但我会尝试找出它为什么会这样显示

【解决方案2】：

这并不能用流星回答这里的问题！但对于那些来到这里从事 Electron 应用程序或不支持 ES6 导入语句的工作流的人来说，这是一个补充。版本 8 和早期 9 的节点尚不支持 ES6 导入语句！如果你处于这种情况！这里你应该如何导入它：

//importing xterm (because node don't support import {Terminal} from 'xterm';)
const xterm = require('xterm');
var Terminal = xterm.Terminal;

分两步！你需要第一个 xterm。然后你会得到一个终端类的引用。

希望对您有所帮助！

【讨论】：