如何在Meteor中使用xterm.js

Question

I'm trying to user xterm.js in my Meteor app and I can't make it works because I got Terminal is not defined .

I use xterm like this in my client's main.html:

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

And xterm is imported because if I take a look in the terminal I can see:

Someone has already used xterm.js with Meteor and could put me on the right track ?

Answer 1

It will not work this way. You need to import the file in your client/main.js file and use its function after:

client/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 $ ')
});

Remember to remove the two script tag in main.html file.

Update : if it still does not work, then let move the xterm.js file to client/compatibility/xterm.js and remove the import statement in the code above.

Answer 2

This doesn't answer the question here with meteor! But it's an add for those who landed here working on an Electron app or a workflow that doesn't support the ES6 import statement. Node at version 8 and early 9 don't support yet ES6 import statement! if you are in such a situation! Here how you should do to import it:

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

it go in two steps! you require first xterm. then you get a reference to Terminal class.

Hope it help!