如何在沒有服務器的情況下運行 React 應用程序

Question

我已經使用npx create-react-app my-app https://github.com/facebook/create-react-app創建了該項目。

運行npm run build 時，我得到以下信息：

70.28 KB build\\static\\js\\2.93539f7c.chunk.js 22.82 KB build\\static\\css\\main.cfe0ffe9.chunk.css 1.41 KB (+44 B) build\\static\\js\\main.79f4d9a1.chunk.js 761 B build\\static\\js\\runtime~main.fdfcfda2.js

該項目是假設它托管在服務器根目錄下構建的。 您可以使用 package.json 中的主頁字段來控制它。 例如，添加以下內容為 GitHub Pages 構建它：

看起來我需要有服務器來運行應用程序。

是否可以在不運行任何服務器的情況下在本地運行它？ 我的意思是因為它只是 html、css、js，為什么這里需要服務器？ 出於什么目的？

另外build文件夾里面生成了很多文件，還有一個index.html，一個static文件夾，所以不像一個bundle.js和一個index.html，看起來比較復雜。

任何人都可以解釋為什么構建文件夾有這么多文件？ 運行應用程序要考慮哪一個？

謝謝

Answer 1

是否可以在不運行任何服務器的情況下在本地運行它？

不

我的意思是因為它只是 html、css、js，為什么這里需要服務器？ 出於什么目的？

React 使用 XHR 加載內容，它無法向文件方案 URL 發出請求。

任何人都可以解釋為什么構建文件夾有這么多文件？

React 利用代碼分塊來優化加載的數據。 這意味着不立即使用的 JS 可以稍后加載，並且不會影響初始頁面加載和首次渲染之間的時間。

Answer 2

默認情況下，假設您的應用程序托管在服務器根目錄下，Create React App 會生成一個構建。 要覆蓋它，請在 package.json 中指定主頁，例如：

"homepage": "http://mywebsite.com/relativepath"

這將使 Create React App 正確推斷要在生成的 HTML 文件中使用的根路徑。

來源： https : //create-react-app.dev/docs/deployment/#building-for-relative-paths

所以你應該只將你的主頁指定為當前路徑：

"homepage": "./"