在 localhost 中保存更改后，React 组件不会在浏览器中重新加载答案

【问题标题】：React Component not reload in browser after save the changes in localhost在 localhost 中保存更改后，React 组件不会在浏览器中重新加载
【发布时间】：2020-05-25 12:10:56
【问题描述】：

我使用 Create-React-App 创建了一个新的 React 项目。在旧项目中，每当我在组件中进行更改并保存组件时，它都会反映在浏览器中，但在新项目中，当我保存代码中的更改时，浏览器不会重新加载并且不会反映更改。所以我停止了正在运行的进程并再次给出npm start

这是我的 package.json 文件。

{
  "name": "new-application",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux": "^4.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "redux-devtools": "^3.5.0",
    "webpack": "^4.41.5"
  }
}

我可以在 package.json 中添加一些内容，以便在我完成更改时自动重新加载浏览器吗？

【问题讨论】：

你想要的叫做“热模块重载”。有它的包，比如这个：github.com/gaearon/react-hot-loader
终端中的脚本是否在对任何组件进行更改并保存后运行？
我的印象是 create-react-app 默认启用了热模块重新加载。
@Ramesh no bro 在终端本身脚本没有运行。
是的@JMadelaine，但它不起作用。

标签： reactjs hot-reload

【解决方案1】：

使用以下命令再次安装您的应用：

npx create-react-app appname

并且不要编辑 package.json

【讨论】：

【解决方案2】：

我遇到了类似（或事件相同）的问题，我通过添加以下标志更改了 package.json 文件中的启动命令：--watch --watch-poll 到 webpack-dev-server：

{
//...
"scripts": {
    "start": "webpack-dev-server --env.ENVIRONMENT=development --content-base src/ --mode development --watch --watch-poll",
    // ...
}
// ...
}

现在，使用 npm start 然后更改 src 文件，我可以在浏览器中看到更改。

请在此处https://webpack.js.org/configuration/watch/ 了解更多选项。

【讨论】：

【解决方案3】：

如果您不想修改 package.json，您可以重新安装您的项目。

有两种方法。

使用 git：

在 git 上推送您的项目
清除计算机上的项目文件夹
git clone https://github.com/my-account/my-project.git
npm install

没有 git：

备份项目的内容node_modules 除外
清空项目文件夹package.json除外
npm install
粘贴您备份的文件

【讨论】：