为什么调试器中包含两次 React 源代码？

Question

我“继承”了一个create-react-app，我正在更新一些功能。我熟悉 JS 并且可以在 React 中编写代码，但我对 webpack、npm、热重载或其他简化开发人员生活的过程知之甚少。

不幸的是，在尝试调试此应用程序时，调试器不会在断点处停止，无论是在 Chrome 还是在 Firefox 中。 This answer 建议当脚本出现两次时出现问题。事实上，在我的 Firefox 中，其中一个页面被加载了两次：

显然，它们不能同时存在于同一目录中。但由于某种原因，浏览器会同时显示并可能同时运行。

如何识别它们的来源并禁用它，以便重新获得对调试器的控制权？我相信它与 webpack、热重载和源映射有关。

---

编辑：如果我重新启动 Firefox，那么一切都很好，只有一份源代码副本。但是，在我修改文件并且页面自动刷新后，我又得到了 2 个副本。因此，这种热重载显然是可疑的……

Answer 1

这似乎是浏览器缓存旧版本的问题。

我还注意到只有一个版本会在断点处停止，而另一个则会忽略它们。

这篇文章告诉你哪个文件被缓存，哪个是真实的：https://stackoverflow.com/a/53877858/373207

在为 js 文件提供服务的服务器中应该可以禁用缓存。 对于 create-react-app 这可以通过将启动命令更改为：

react-scripts start --no-cache

来源：https://github.com/facebook/create-react-app/issues/6074#issuecomment-494720199