为什么热重载不适用于 reactjs visual studio 2019 模板答案

【问题标题】：Why does hot reloading not work for reactjs visual studio 2019 template为什么热重载不适用于 reactjs visual studio 2019 模板
【发布时间】：2019-12-23 12:20:23
【问题描述】：

我一直在家里和工作的电脑上玩弄 ReactJS。在家里，我使用 Visual Studio 2019、NodeJS 10.16.2、NPM 6.9.0 和 webpack 3.11.0。

当我第一次开始我的项目时，热重载 DID 工作。在某些时候，它停止了工作。我想也许我无意中对包或设置进行了一些更改，所以我从头开始创建了一个全新的解决方案，但它仍然不起作用。所以显然我对我的机器做了一些事情，但我无法想象是什么。

在工作中，也使用 Visual Studio 2019（我必须检查其他东西的版本），热重载确实有效。

谁能想到我可能不小心做了什么导致它停止工作的事情？或者尝试让它再次工作的方法？我尝试了几乎所有在网上找到的东西，但其中大部分都不是最近的，而且没有任何帮助。

根据要求提供package.json文件：

{
  "name": "jobs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.1.3",
    "faye-websocket": "^0.11.3",
    "jquery": "3.4.1",
    "lodash": "^4.17.15",
    "merge": "^1.2.1",
    "oidc-client": "^1.9.1",
    "react": "16.9.0",
    "react-dev-utils": "^9.0.3",
    "react-dom": "^16.0.0",
    "react-loading-overlay": "^1.0.1",
    "react-router-bootstrap": "0.25.0",
    "react-router-dom": "5.0.1",
    "react-scripts": "3.1.1",
    "react-spinners": "0.6.1",
    "react-transition-group": "^4.2.2",
    "reactstrap": "8.0.1",
    "rimraf": "3.0.0",
    "toastr": "^2.1.4"
  },
  "devDependencies": {
    "ajv": "^6.9.1",
    "cross-env": "^5.2.1",
    "eslint": "6.3.0",
    "eslint-config-react-app": "5.0.1",
    "eslint-plugin-flowtype": "4.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "^7.14.3"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

【问题讨论】：

也许你家的 Visual Studio 和你的作品是不同的版本？
不，它们都是最新版本。
热重载是通过 websocket 完成的，检查你的控制台是否有错误
@LawrenceCherone 不知道为什么我没想到那里看，但是您的建议导致了以下问题。发布所有列出的详细信息太长了，但也许这对你来说意味着什么？ websocket.js:80 WebSocket 连接到 'wss://localhost:44363/sockjs-node/449/vc3j5upz/websocket' 失败：WebSocket 在连接建立之前关闭。
我想说你在不分享你的热重载代码/配置的情况下解决这个问题的机会非常低。奇怪使用相同的代码和配置应该在一台机器上而不是另一台机器上工作，所以要么有实际上存在差异，要么它的设置使其行为不同，具体取决于无论出于何种原因，它正在运行的机器。在不共享代码和配置的情况下，以及可能包括您正在使用的浏览器在内的所有内容的确切版本的情况下，我认为解决此问题的任何尝试都可能只是猜测。

标签： node.js reactjs npm webpack visual-studio-2019

【解决方案1】：

我在全新安装 Visual Studio 2019 时遇到了同样的问题，我必须安装包含 Browser Reload on Save 扩展的 Web Essentials 扩展。

【讨论】：

【解决方案2】：

在 webpack 配置中设置缓存：false。这将解决 HMR 问题

https://webpack.js.org/configuration/other-options/#cache

供参考，您可以参考给定的链接

【讨论】：

此模板中没有“webpack.config.js”文件。办公室的项目中也没有一个（正在工作）。我在办公室的上面的 cmets 中也遇到了同样的控制台错误，所以显然这与它为什么不能在家里工作无关。我将每个 NPM 包都更新到了最新版本，但它仍然无法在家里工作。所以我的下一步是比较 package.json 文件，看看办公室和家里是否有什么不同（这很奇怪，因为据我所知他们使用了相同的模板）。
您提到的所有症状都指向文件观察程序问题（第一次工作正常）。也许我错了。但请尝试这样做以确保情况并非如此，请转到 vs-code 设置（左下角的齿轮图标）。搜索“观察者排除”。将 /node_modules/ 添加到排除列表（如果尚未添加）。
我没有使用 VS Code，我使用的是 Visual Studio 2019。

【解决方案3】：

我认为是模板问题。我建议你卸载 reactjs 模板并使用 webpack 添加自己的配置。遵循本手册https://webpack.js.org/guides/getting-started/

您可以从项目中手动加载 Bundle 文件

【讨论】：

这不起作用。我没有收到错误（在 VS 或 Chrome 中），但它只是挂在浏览器中并且从未真正启动应用程序。
可以分享一下 package.json 文件吗？
将 package.json 添加到原始帖子中，太长无法添加到评论中。
我认为是模板问题。我建议你卸载 reactjs 模板并使用 webpack 添加自己的配置。遵循本手册webpack.js.org/guides/getting-started
如果原来可以，怎么可能是模板问题？

【解决方案4】：

如果您使用 Visual Studio 运行应用程序，并且由于某种原因运行了 `npm run build，那么您的 /build 文件夹与您的 /public 文件夹对齐。然后，Visual Studio 将更喜欢 /build 文件夹，因此您的热重载将不起作用。删除 /build 文件夹，重新构建 Visual Studio 应用程序，并且在开发时不要使用“npm run build”。

【讨论】：

【解决方案5】：

你应该为你的 create-react-app 配置一个热加载器。请查看this 链接。还有一些工作正在进行为 CRA 进行新的热重载。请查看this链接了解更多信息。

【讨论】：

这对于应该已经使用普通 VS 模板工作的东西来说似乎很头疼。