在本地主机中保存更改后，反应组件不会在浏览器中重新加载

Question

我使用 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 中添加一些东西以便在我完成更改时自动重新加载浏览器吗？

Answer 1

使用以下方式再次安装您的应用：

npx create-react-app appname

并且不要编辑 package.json

Answer 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/查看更多选项。

Answer 3

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

有两种方法。

与git:

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

没有git:

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

在本地主机中保存更改后，反应组件不会在浏览器中重新加载

React Component not reload in browser after save the changes in localhost

reactjs

hot-reload

与git:

没有git: