4

我想对xterm.js的源代码进行一些更改，并在进行 PR 之前对其进行测试。我未能成功生成有效的“分布”。

（如果我的术语不正确，我深表歉意——我对 Web 开发很陌生）

设置

我用以下内容建立了一个简单的测试网站index.html

<!doctype html>
  <html>
    <head>
      <script src="%PUBLIC_URL%/xterm.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
      <script>
        console.log(Terminal);
        var term = new Terminal();
        term.open(document.getElementById('terminal'));
        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
      </script>
    </body>
  </html>

在该位置%PUBLIC_URL%，我将从以下任一位置放置一个 JS 源文件xterm.js：

  • node_modules/xterm/dist/xterm.js- 通过 npm 添加
  • xterm.js/lib/xterm.js- 从 GitHub 存储库构建

为了构建本地副本，xterm.js我采取了以下步骤：

git clone https://github.com/xtermjs/xterm.js.git xterm-local
cd xterm-local
npm install
npm run package

（注意：如果你在家里跟着我，我无法在 Windows 或 Mac 上构建 xterm.js——我只能使用 Ubuntu 18.04 完成这些步骤）

命令全部成功运行，最后一个创建xterm-local/lib包含xterm.js. 我使用该文件来替换可以从 NPM 安装中获得的副本。

结果

普通的

使用 NPM 时，dist/xterm.js我成功地看到我的终端元素呈现并且日志读取

ƒ Terminal(options) {
        this._core = new Terminal_1.Terminal(options);
        this._addonManager = new AddonManager_1.AddonManager();
    }

使用本地构建

当使用我本地构建的输出时，xterm-local/lib/xterm.js没有呈现终端元素，出现错误：Uncaught TypeError: Terminal is not a constructor并且日志读取

{Terminal: ƒ, __esModule: true}
  Terminal: ƒ e(e)
  __esModule: true
  __proto__: Object

期望

我希望在构建 xterm.js 的本地副本之后，我可以将它与 NPM 发行版互换使用。但是我很好奇为什么该命令npm run package不生成dist文件夹而是生成文件lib夹。我是否缺少其他步骤来制作我自己的可用副本xterm.js？

4

2 回答 2

3

我已经达到了一个半可接受的解决方案，所以我想分享我能做的。

这不是您要查找的演示

感谢用户 Peter，我找到了访问 xterm.js 的关于贡献的wiki页面的方法（不要与repo 本身中的CONTRIBUTING.md文件混淆）。很难找到，因为对于一个没有经验的人来说，repo 的CONTRIBUTING.md文档中的这一行：

运行xterm.js演示。

似乎是指可以在xtermjs.org上找到的演示，其中包含以下简单说明：

首先你需要安装模块，我们只通过 npm 发布，所以你需要安装它，然后通过运行添加 xterm.js 作为依赖项：

npm install xterm

要开始在浏览器上使用 xterm.js，请将 xterm.js 和 xterm.css 添加到 html 页面的头部。然后创建一个 xterm 可以自行附加的对象。最后实例化 Terminal 对象，然后用 div 的 DOM 对象调用 open 函数。

    <head>
      <link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" />
      <script src="node_modules/xterm/dist/xterm.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
      <script>
        var term = new Terminal();
        term.open(document.getElementById('terminal'));
        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
      </script>
    </body>   </html> ```

然而事实并非如此。相反，他们正在讨论运行位于xterm.js/demo中的演示应用程序

运行真实的演示

xterm.js 的维护者比我更有经验。他们提供了很多方法来构建和运行演示，这可能会让人望而生畏。最终，尽管我不愿意向他们提供我的信用卡信息，但 SourceLair 选项对我来说还是有用的。

首先创建一个xterm.js 存储库的分支- 这很重要，因为您希望能够更改源代码！

方便，因为它可能是这种“捷径” https://lair.io/xtermjs/xtermjs没有帮助。您真正想做的是转到 SourceLair，基于您自己的 xterm 分支创建一个新项目，然后选择预设的“节点”环境。这将允许您测试您所做的更改（通过使用 Web 服务器工具）并保存您的更改（因为您使用自己的 fork 而不是使用上游 repo）

  • 前往 SourceLair
  • 通过克隆 repo 开始一个新项目
  • 提供您的回购 URL
  • 等待初始化（git clone、yarn install、webkit 编译等）
  • 为您的更改创建一个新分支（在终端中git checkout -b [name_of_your_new_branch]）
  • 进行更改
  • 在项目的公共 URL中测试它们
  • 提交并将您的更改推送回您的存储库

（如果您想跳过使用网络编辑器，那么您可以对您的存储库进行更改并将这些更改拉入 Source Lair 进行测试）

其他方法的挑战

仅供参考。

  • Docker：使用这个预配置的镜像很容易，但在容器中进行我需要的更改并不容易。
  • 工头（Procfile 跑步者）：从来没有听说过他们……浪费的时间太少了（这是一种爱好，请注意！）
  • Linux / MacOSX：在 linux 上我可以构建但无法测试（我唯一的 linux 是我只是 SSH 进入的 VPS），在 Mac 上我可以（大概）测试但不能构建（因为在编写 node-gyp 依赖项失败时难的）
于 2019-09-07T23:55:01.170 回答
-1

如果您只需要运行并查看感觉如何，请使用node-pty构建在 xtermjs 之上的包

https://github.com/microsoft/node-pty/tree/master/examples/electron

于 2020-06-22T14:30:24.070 回答