Nodemon 未在 React-Express-Node 应用程序中刷新浏览器

IT技术 javascript reactjs webpack nodemon
2021-04-30 07:37:21

我已经在我的工作区nodemon 本地安装，但即使它在进行更改后在终端中重新启动，它也不会刷新浏览器页面。我每次都必须手动刷新它。

我在环境中运行了 Express、Node、React 和 Webpack。

这是我的设置的样子 -

在此处输入图片说明

我的package.json启动server.js-

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js"
  },

并且server.js是——

var express = require('express');


     var app = express();
        app.use(express.static('public'));
        app.listen(3000, function () {
            console.log("Express server is up on port 3000");
        });

该entry point在的WebPack配置文件是-

module.exports = {
    entry: './public/scripts/app.jsx',
    output: {
        path: __dirname,
        filename: './public/scripts/bundle.js'
    }

我应该怎么做才能修复它？

更新 -

我制作了一个视频来描述这种情况，如果有帮助的话。

3个回答

nodemon 仅用于在您的服务器代码更改时重新启动服务器。它没有在浏览器中重新加载页面的功能。如果你想自动重新加载浏览器，你可以，例如，除了你的 nodemon 之外，你还可以运行一个 webpack 开发服务器。webpack 开发服务器能够在您的客户端代码更改时在浏览器中重新加载页面，如果您使用其热module重新加载功能，它甚至可以在不重新加载完整页面的情况下更新浏览器中的页面。

在 package.json 中

"scripts": {
   "start": "nodemon server.js -e html,js,css"
},

在服务器js中

var reload = require('reload')

app.listen(3000, () => {

  console.log(`Listening on port 3000`);
})

reload(app);

在 index.html 中

<body>
  <h1>ron</h1>
  <script src="/reload/reload.js"></script> <!-- it's necessary -->
</body>

对于那些需要使用 nodemon 并在更改时重新加载浏览器的人，我在这里回复https://stackoverflow.com/a/51089425/7779953

解决方案是 Nodemon + Browser Sync + Gulp + Express 服务器

其它你可能感兴趣的问题
上一篇React：变量中的 jsx 与函数与单独的组件 下一篇如何防止在 React Components 中卸载？