我正在嘗試使用 React JS 建立一個具有按鍵通話 (PTT) 功能的 Web 應用程式。 我們將使用的技術之一是 Mumble。

此 https://github.com/Johni0702/mumble-web 儲存庫上的示範 https://voice.johni0702.de/?address=voice.johni0702.de&port=443/demo 正常運作。 我嘗試在本地計算機上運行存儲庫，但遇到了一些不同的錯誤。

安裝錯誤

我在執行 Windows 作業系統和 Node JS v16 的本機電腦上使用 npm install 命令複製並嘗試在儲存庫的根資料夾中安裝所有庫，但出現以下錯誤。

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

然後我使用 NVM 將 Node JS 版本從 v16 切換到 v14。 我嘗試再次使用 npm install 命令安裝儲存庫上的所有庫，但隨後出現另一個不同的錯誤。

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 ]

我嘗試刪除 package.json 檔案中的 "prepare": "rm -rf dist && npm run build", 程式碼（第 45 行）。 我不知道刪除程式碼是否會對以後運行應用程式產生影響。 我還在網上搜索並找到了這個答案https://stackoverflow.com/a/62744648/8339172來清除npm緩存，重新生成package-lock.json文件，並刪除node_modules資料夾。 我完成了所有這些，然後再次運行“npm install”命令。

這次沒有錯。

運行時錯誤

繼續上一節，我嘗試透過執行 npm run watch 指令來執行儲存庫的根目錄。 我不知道這是否正確，因為我通常輸入 npm start 命令在本地運行 React JS。 我沒有看到 package.json 檔案上配置任何端口，因此我在瀏覽器上打開了 localhost:8080 位址。 不幸的是，那裡什麼都沒有。瀏覽器說這個網站無法存取。本機拒絕連線.

應用程式資料夾

繼續上一節，我嘗試透過雙擊 app 資料夾中的 index.html 檔案來運行該檔案。 該應用程式似乎崩潰了，因為我看到瀏覽器控制台上出現錯誤，如下面的螢幕截圖所示。 這是錯誤訊息：

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

問題

我想了解如何在儲存庫https://github.com/Johni0702/mumble 上建立示範(https://voice.johni0702.de/?address=voice.johni0702.de&port=443/demo) -網絡。我的問題是：

1. 哪一個是示範應用程式的原始碼？是來自儲存庫的根資料夾還是應用程式資料夾？
2. 繼續第一個問題，如何在本機安裝示範應用所需的所有依賴項？
3. 繼續第一個問題和第二個問題，如何在本地運行演示應用？

環境

作業系統：Windows 11

# 節點：14.21.2、16.18.0和18.13.0（可切換）