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)