如何在本地构建和使用 xterm.js？
[英]How to build and use xterm.js locally?
问题描述
I want to make some changes to the source code of xterm.js and test them before making a PR.
我想对xterm.js的源代码进行一些更改并在进行 PR 之前对其进行测试。 I have been unsuccessful in generating a working 'distribution.'我未能成功生成有效的“分布”。
(Apologies if my terminology is incorrect -- I am pretty new to web development) （如果我的术语不正确，我深表歉意——我对 Web 开发还很陌生）
Setup设置
I set up a simple test website with the following index.html我使用以下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>
In the location %PUBLIC_URL% I will place a JS source file xterm.js from either:在%PUBLIC_URL%位置，我将从以下任一位置放置一个 JS 源文件xterm.js ：
-
node_modules/xterm/dist/xterm.js- as added through npmnode_modules/xterm/dist/xterm.js- 通过 npm 添加 xterm.js/lib/xterm.js- as built from the GitHub repositoryxterm.js/lib/xterm.js- 从 GitHub 存储库构建
To build a local copy of xterm.js I took these steps:为了构建xterm.js的本地副本，我采取了以下步骤：
git clone https://github.com/xtermjs/xterm.js.git xterm-local
cd xterm-local
npm install
npm run package
(Note: if you are following along at home I could not build xterm.js on Windows or Mac -- I only got through these steps using Ubuntu 18.04) （注意：如果您在家中学习，我无法在 Windows 或 Mac 上构建 xterm.js——我只能使用 Ubuntu 18.04 完成这些步骤）
The commands all run successfully and the last one creates xterm-local/lib which contains xterm.js .所有命令都成功运行，最后一个创建包含xterm.js xterm-local/lib 。 I use that file to replace the copy that can be obtained from the NPM installation.我使用该文件来替换可以从 NPM 安装中获取的副本。
Results结果
Normal普通的
When using the NPM dist/xterm.js I successfully see my terminal element rendered and the log reads使用 NPM dist/xterm.js我成功地看到了我的终端元素呈现并且日志读取
ƒ Terminal(options) {
this._core = new Terminal_1.Terminal(options);
this._addonManager = new AddonManager_1.AddonManager();
}
Using local build使用本地构建
When using my locally built output from xterm-local/lib/xterm.js there is no terminal element rendered, there is an error: Uncaught TypeError: Terminal is not a constructor and the log reads当使用我从xterm-local/lib/xterm.js本地构建的输出时，没有呈现终端元素，有一个错误： Uncaught TypeError: Terminal is not a constructor and the log read
{Terminal: ƒ, __esModule: true}
Terminal: ƒ e(e)
__esModule: true
__proto__: Object
Expectations期望
I would expect that after building my local copy of xterm.js that I could use it interchangeably with the NPM distribution.我希望在构建我的本地 xterm.js 副本后，我可以将它与 NPM 发行版互换使用。 However I am curious why the command npm run package does not generate the dist folder but a lib folder instead.但是我很好奇为什么命令npm run package不生成dist文件夹而是生成lib文件夹。 Are there additional steps that I am missing to make my own useable copy of xterm.js ?我是否缺少其他步骤来制作我自己的xterm.js可用副本？
2 个解决方案
解决方案1
3 已采纳 2019-09-07 23:55:01
I've reached a semi-acceptable solution so I'd like to share what I can.我已经达成了一个半可接受的解决方案，所以我想分享我能做的。
This is not the demo you are looking for这不是您要找的演示
Thanks to user Peter I found my way to xterm.js' wiki page about contributing (not to be confused with theCONTRIBUTING.md file in the repo itself).感谢用户 Peter，我找到了关于贡献的xterm.js wiki页面（不要与 repo 本身中的CONTRIBUTING.md文件混淆）。 It was hard to find because to an uninitiated individual this line in the repo'sCONTRIBUTING.md document:在 repo 的CONTRIBUTING.md文档中很难找到这一行，因为对于一个没有经验的人来说：
Get the xterm.js demo running.
seems to refer to the demo that can be found on xtermjs.org with these simple instructions:似乎参考了可以在xtermjs.org上找到的演示，其中包含以下简单说明：
First you need to install the module, we ship exclusively through npm so you need that installed and then add xterm.js as a dependency by running:
npm install xtermTo start using xterm.js on your browser, add the xterm.js and xterm.css to the head of your html page.
<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> ```
However that is not the case.然而事实并非如此。 Instead they are talking about running the demo application that lives in xterm.js/demo相反，他们正在谈论运行位于xterm.js/demo 中的演示应用程序
Running the real demo运行真正的演示
The xterm.js maintainers are very very very much more experienced than me. xterm.js 的维护者比我更有经验。 They've provided so many ways to build and run the demo that it can be daunting.他们提供了很多方法来构建和运行演示，这可能令人生畏。 Eventually the SourceLair option worked out for me despite my aversion to giving them my credit card info.尽管我不愿意向他们提供我的信用卡信息，但最终 SourceLair 选项对我有用。
First make a fork of the xterm.js repo - this is important because you want to be able to change the source code!首先创建xterm.js 存储库的分支- 这很重要，因为您希望能够更改源代码！
Handy as it may be this 'shortcut' https://lair.io/xtermjs/xtermjs kind of doesn't help.方便，因为它可能是这种“快捷方式” https://lair.io/xtermjs/xtermjs有点无济于事。 What you really want to do is go to SourceLair, create a new project based on your own fork of xterm and choose the preset 'Node' environment.您真正想做的是转到 SourceLair，基于您自己的 xterm分支创建一个新项目，并选择预设的“节点”环境。 That will allow you to both test the changes you make (by using the web server tool) AND save your changes (because you used your own fork instead of using the upstream repo)这将允许您测试您所做的更改（通过使用 Web 服务器工具）并保存您的更改（因为您使用了自己的 fork 而不是使用上游存储库）
- Go to SourceLair前往 SourceLair
- Start a new project by cloning a repo通过克隆 repo 来启动一个新项目
- Provide your repo URL提供您的回购网址
- Wait for initialization (git clone, yarn install, webkit compilation etc)等待初始化（git clone、yarn install、webkit 编译等）
- Create a new branch for your changes (in the Terminal
git checkout -b [name_of_your_new_branch])为您的更改创建一个新分支（在终端git checkout -b [name_of_your_new_branch]） - Make your changes进行更改
- Test them out in the Public URL of the project在项目的公共 URL中测试它们
- Commit and push your changes back to your repo提交并将您的更改推送回您的存储库
(if you want to skip using the web editors then you could make changes to your repo and pull those changes into Source Lair for testing) （如果你想跳过使用网络编辑器，那么你可以对你的 repo 进行更改并将这些更改拉入 Source Lair 进行测试）
Challenges with other methods其他方法的挑战
Just FYI.仅供参考。
- Docker: It was easy to use this pre-configured image but it was not easy to make the changes I needed to from within the container. Docker：使用这个预先配置的镜像很容易，但在容器内进行我需要的更改并不容易。
- Foreman (Procfile runners): never heard of 'em... too little time to waste (this is a hobby, mind you!) Foreman（Procfile runners）：从来没有听说过他们......浪费时间太少了（这是一种爱好，请注意！）
- Linux / MacOSX: On linux I could build but could not test (my only linux is a VPS that I just SSH into) and on Mac I could (presumably) test but not build (because at time of writing the node-gyp dependency failed hard) Linux / MacOSX：在 linux 上我可以构建但无法测试（我唯一的 linux 是一个我只是通过 SSH 连接的 VPS）而在 Mac 上我可以（大概）测试但不能构建（因为在编写时 node-gyp 依赖失败难的）
解决方案2
0 2020-06-22 14:30:24
If all you need is to run and see how it feels, use node-pty package that's built on top of xtermjs如果您只需要运行并查看感觉如何，请使用构建在 xtermjs 之上的node-pty包
https://github.com/microsoft/node-pty/tree/master/examples/electron https://github.com/microsoft/node-pty/tree/master/examples/electron
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.