为什么每次更改我的 React 应用程序都必须重新运行服务器？

Question

我正在用react做我的第一个项目，直到现在我从来没有用过任何其他框架，只用过纯html+js+php+nodejs。 所以，我正在建立一个投资组合水疗中心，但我遇到了这个问题。当我对项目进行任何更改时，我必须重新启动整个服务器才能使其生效。我很确定这不应该发生。

更准确地说，我使用 cra（如果我记得的话是 npx create-react-app）创建了一个 React 应用程序，并且我正在使用“npm start”运行服务器。

除此之外，我在 Win 11 上使用 VSC 作为我的 IDE，我的终端在 wsl 上：kali linux

这是我的 App.js

import React from 'react';
import './App.css';
import './layer1.svg';
import Menu from './components/menu';
import Portfolio from './components/portfolio'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'





function App() {
  return (
  <div>
    <Menu/>
    <Router>
        <Routes>
        <Route path="/portfolio" element={<Portfolio />}/>
        <Route exact path="/" element={<Portfolio />}/>
        </Routes>
    </Router>
    </div>
  );
}

export default App;

这是我的 index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
if (module.hot) {
  module.hot.accept();
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

我做了很多研究来尝试解决我的问题，这是我尝试过的：

1. 将我的最大用户观看次数增加到 524288
2. 添加带有

   FAST_REFRESH=false

   的“.env”文件
3. 添加：

if (module.hot) {
  module.hot.accept();
}

进入我的 index.js

4. 修改我的 package.json .scripts：

  "scripts": {
    "start": "CHOKIDAR_USEPOLLING=true react-scripts start", //here
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

但没有任何效果。

我期待更改会自动出现在我的浏览器中，甚至通过重新加载页面出现。

非常感谢任何可以帮助我的人:)

Answer 1

您可以通过安装

npm-watch

包来做到这一点：

npm i --savedev npm-watch

然后你可以在你的

package.json

中制作一个新脚本：

"scripts": {
  "start": "CHOKIDAR_USEPOLLING=true react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
  "watch": "npm-watch"
},

并且它应该使用

npm run watch

命令自动重建。