如何在没有服务器的情况下运行 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": "./"