Mumble Web – Probleme mit der lokalen Codeausführung und Demoanwendungen

Question

Ich versuche, mit React JS eine Webanwendung mit Push-to-Talk-Funktionalität (PTT) zu erstellen. Eine der Technologien, die wir verwenden werden, ist Mumble.

Die Demo https://voice.johni0702.de/?address=voice.johni0702.de&port=443/demo auf diesem https://github.com/Johni0702/mumble-web-Repository funktioniert einwandfrei. Ich habe versucht, das Repository auf meinem lokalen Computer auszuführen, habe aber ein paar verschiedene Fehler erhalten.

Installationsfehler

Ich habe mit dem Befehl npm install auf meinem lokalen Computer mit Windows-Betriebssystem und Node JS v16 geklont und versucht, alle Bibliotheken im Stammordner des Repositorys zu installieren, habe aber die folgende Fehlermeldung erhalten.

verbose stack Error: command failed
verbose stack     at ChildProcess.<anonymous> (C:\Users\LENOVO\AppData\Roaming\nvm\v16.18.0\node_modules\npm\node_modules\@npmcli\promise-spawn\lib\index.js:63:27)
verbose stack     at ChildProcess.emit (node:events:513:28)
verbose stack     at maybeClose (node:internal/child_process:1100:16)
verbose stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:304:5)
verbose pkgid [email protected]
verbose cwd C:\Users\LENOVO\AppData\Local\npm-cache\_cacache\tmp\git-cloneZtPlJ2
verbose Windows_NT 10.0.22621
verbose node v16.18.0
verbose npm  v8.19.2
error code 1
error path C:\Users\LENOVO\AppData\Local\npm-cache\_cacache\tmp\git-cloneZtPlJ2
error command failed
error command C:\WINDOWS\system32\cmd.exe /d /s /c npm run compile
verbose exit 1
timing npm Completed in 8638ms
verbose code 1

Dann habe ich NVM verwendet, um die Node JS-Version von v16 auf v14 umzustellen. Ich habe erneut versucht, mit dem Befehl npm install alle Bibliotheken im Repository zu installieren, habe dann aber einen anderen Fehler erhalten.

verbose stack Error: [email protected] prepare: `rm -rf dist && npm run build`
verbose stack Exit status 1
verbose stack     at EventEmitter.<anonymous> (C:\Users\LENOVO\AppData\Roaming\nvm\v14.21.2\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
verbose stack     at EventEmitter.emit (events.js:400:28)
verbose stack     at ChildProcess.<anonymous> (C:\Users\LENOVO\AppData\Roaming\nvm\v14.21.2\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
verbose stack     at ChildProcess.emit (events.js:400:28)
verbose stack     at maybeClose (internal/child_process.js:1088:16)
verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:296:5)
verbose pkgid [email protected]
verbose cwd D:\A.ing\Works\Others\Lacak-and-Valid\Exercises\React-Js\mumble-web-2
verbose Windows_NT 10.0.22621
verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "i"
verbose node v14.21.2
verbose npm  v6.14.17
error code ELIFECYCLE
error errno 1
error [email protected] prepare: `rm -rf dist && npm run build`
error Exit status 1
error Failed at the [email protected] prepare script.
error This is probably not a problem with npm. There is likely additional logging output above.
verbose exit [ 1, true ]

Ich habe versucht, den "prepare": "rm -rf dist && npm run build", Code (Zeile 45) in der Datei package.json zu entfernen. Ich weiß nicht, ob das Entfernen des Codes Auswirkungen auf die zukünftige Ausführung der Anwendung haben wird. Ich habe auch online gesucht und diese Antwort https://stackoverflow.com/a/62744648/8339172 gefunden, um den NPM-Cache zu leeren, die Datei package-lock.json neu zu generieren und den Ordner node_modules zu löschen. Ich habe das alles gemacht und dann den Befehl „npm install“ erneut ausgeführt.

Diesmal keine Fehler.

Laufzeitfehler

Als Fortsetzung des vorherigen Abschnitts habe ich versucht, das Stammverzeichnis des Repositorys auszuführen, indem ich den Befehl npm run watch ausgeführt habe. Ich weiß nicht, ob das richtig ist, da ich normalerweise den Befehl npm start eingebe, um React JS lokal auszuführen. Da in der Datei package.json keine Ports konfiguriert sind, habe ich die localhost:8080-Adresse in meinem Browser geöffnet. Leider gibt es da nichts. Browser sagt 这个网站无法访问。本地主机拒绝连接.

Anwendungsordner

Als Fortsetzung des vorherigen Abschnitts habe ich versucht, die Datei index.html durch einen Doppelklick im Ordner app auszuführen. Die App scheint abzustürzen, da ich in der Browserkonsole einen Fehler sehe, wie im Screenshot unten gezeigt. Dies ist die Fehlermeldung:

Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

Frage

Ich würde gerne erfahren, wie man eine Demo im Repository https://github.com/Johni0702/mumble (https://voice.johni0702.de/?address=voice.johni0702.de&port=443/demo) erstellt - Netz. Meine Frage ist:

1. Welches ist der Quellcode der Demoanwendung? Stammt es aus dem Stammordner des Repositorys oder aus dem Anwendungsordner?
2. Weiter mit der ersten Frage: Wie installiere ich alle für die Demo-App erforderlichen Abhängigkeiten lokal?
3. Weiter mit der ersten und zweiten Frage: Wie führt man die Demoanwendung lokal aus?

Umwelt

Betriebssystem: Windows 11

Knoten: 14.21.2, 16.18.0 und 18.13.0 (umschaltbar)

Answer 1

最后，我可以在我的计算机上运行该应用程序（根级别）。

从安装错误部分，我们可以看到这个错误 verbose stack Error: m<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec99818e8089c19b898eacdcc2d9c2dd">[ email protected]</a> 准备：`rm -rf dist && npm run build` 当基于 Windows 的计算机尝试运行基于 Unix 的命令时发生。 Windows 计算机上没有 rm 命令。

因此，我尝试在 Windows 计算机上安装 WSL https://techcommunity.microsoft.com/t5/windows-11/how-to-install-the-linux-windows-subsystem-in- windows-11/td-p/2701207。

在努力安装 WSL 后，我可以在应用程序上运行 npm install 命令，并且没有出现错误消息。

但后来我不知道如何运行该应用程序。幸运的是，我们找到了另一个类似的存储库，其中包含 start 脚本 https://github.com/Theofilos -Chamalis/mumble-web。使用 npm install 和 npm start，我终于可以运行前端应用程序的 mumble 实现。

注意：来自 https://github.com/Theofilos-Chamalis/mumble 的应用程序-web 没有像 https://github.com/Johni0702/mumble-web 那样更新 一个，但我认为这是这个问题的另一个问题。