为什么运行React时会启动本地服务器？

Question

create-react-app似乎会在npm start时启动本地服务器。

(npx随npm 5.2+及更高版本一起使用，请参阅旧版npm的说明)

然后打开http://localhost:3000/以查看您的应用程序。

当您准备好部署到生产环境时，请使用npm run build创建一个缩小的捆绑包。

https://facebook.github.io/create-react-app/docs/getting-started

为什么需要启动服务器才能运行JavaScript？

直接在浏览器中打开构建结果文件与启动服务器有何区别、优劣势？

无论是不是create-react-app，这对其他框架也是适用的吗？

我读了React的存储库等关于此问题的信息，但没有讨论此问题的主题。

- user11584620

---

React代码无法被浏览器读取，它需要编译为JS，以便浏览器能够理解。您可以直接从公共文件夹中在浏览器中打开捆绑文件。 - Rikin

这是最近JavaScript库的路径，有关于它们如何管理以及为什么的许多细节。看一下webpack和babel可能会有所帮助。 - Afsanefda

Answer 1

< p > create-react-app启动本地服务器的主要优势之一是热更新。< /p> < p >当编写大多数现代JavaScript代码（包括React）时，需要将代码转译（基本上是转换为JS的不同版本）才能让浏览器理解。这称为构建过程，它将< code > src < /code>目录中的所有文件捆绑成单个静态JS文件。< /p> < p >您可以使用< code > npm run build 手动完成此操作，该操作创建一个index.html文件，您可以在其中打开浏览器而无需运行服务器。但是，您必须经历两个步骤才能查看更改：重新构建，然后重新加载浏览器以查看更改。< /p> < p >< code > create-react-app 的设计使其能够监视文件中的更改，在每次保存时更新已构建的JS，然后重新启动服务器，自动加载更改。< /p> < p >通过在localhost上运行服务器，< code > create-react-app 可以在您每次保存时立即更新您的页面，无需手动重建或刷新页面。实现了热更新！< /p>

- helloitsjoe

---

我认为可以通过使用browser-sync和watch函数来替换热重载。相比于使用browser-sync+watch的现有方法，构建本地服务器是否有优势？ - user11584620

是的，这个想法是一样的，browser-sync 也会启动一个本地服务器：https://www.browsersync.io/（在“Get started in 5 minutes”中查看＃3）。 - helloitsjoe