时间戳

首页 > 解决方案 > 如何将 xterm.js(in electron) 连接到实际工作的命令提示符？

electron - 如何将 xterm.js(in electron) 连接到实际工作的命令提示符？

问题描述

我把自己挖进了一个很深的兔子洞，试图找出标题所说的内容。如果你对这个问题感到困惑，我会给出更详细的解释：你见过 VSCode 终端吗？还是终点站？好吧，我想做那些应用程序所做的事情。我有一个电子应用程序，为了方便用户，我想在其中包含某种命令提示符。我查看了 xterm.js，但我只能找到 SSH 之类的示例，而不是指向系统上托管的控制台的直接链接。我要问的是如何将 xterm.js(in electron) 连接到真正的工作命令提示符？我见过能够与 cmd.exe 交互的程序，例如 Windows Terminal。我会用它作为一个例子。

图片取自进程黑客

在随附的照片中，您可以看到三个过程。WindowsTerminal.exe、OpenConsole.exe 和 cmd.exe。在深入研究了 Windows 终端的源代码后，我可以看到 OpenConsole.exe 会随着您创建的每个 cmd 实例启动。所以我假设这是与 cmd.exe 交互的程序。现在我知道 Windows 终端是使用 UWP 制作的，但你可以看到VSCode 发生了类似的事情（我打开了一堆终端来演示）

这是另一个有类似问题的帖子，但没有答案。我希望这个能引起一些关注。

所以如果你能回答，谢谢。如果你有点走神，请记住我的问题：如何将 xterm.js(in electron) 连接到真正的工作命令提示符？

对不起，如果你不能理解我的措辞，我不太擅长这个：P

标签： electroncommand-promptxtermjs

解决方案

以下视频对我很有帮助。很快，您需要：

  1. 安装 node-pty 和 electron-rebuild 包（附加到 xterm）
  2. 将以下代码放置到相应的流程文件中

在主进程（main.js）中：

const os = require('os');
const pty = require('node-pty');

var shell = os.platform() === "win32" ? "powershell.exe" : "bash";
var ptyProcess = pty.spawn(shell, [], {
        name: 'xterm-color',
        cols: 80,
        rows: 24,
        cwd: process.env.HOME,
        env: process.env
    });
    
    ptyProcess.on("data", (data) => {
      mainWindow.webContents.send("terminal-incData", data);
    });

    ipcMain.on("terminal-into", (event, data)=> {
      ptyProcess.write(data);
    })

在渲染器进程中：

const Terminal  =  require('xterm').Terminal;
const FitAddon = require('xterm-addon-fit').FitAddon;

const term = new Terminal();
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);

// Open the terminal in #terminal-container
term.open(document.getElementById('terminal-container'));
term.onData(e => {
    ipcRenderer.send("terminal-into", e);
} );
ipcRenderer.on('terminal-incData', (event, data) => {
    term.write(data);
})

// Make the terminal's size and geometry fit the size of #terminal-container
fitAddon.fit();
  1. 如果出现错误，请运行 electron-rebuild 命令。

当您尝试安装 electron-rebuild 软件包时，您可能会收到以下错误：

在 MAC 中：error: no template named 'remove_cv_t'. 解决方案在这里

在 Windows 中：gyp ERR! find Python 解决方案在这里

推荐阅读