Nodemon 和/或使用 Node-React Web 應用程序熱重載

Question

在使用 webpack 配置 Web 應用程序以創建最佳開發體驗方面，我仍然很陌生。 我參加了兩門不同的 Node-React 課程：一門我們使用 nodemon 來跟蹤更改，另一門我們實現熱重載。

當涉及到這兩個依賴時，它是一個還是另一個？ 它們應該一起使用，還是有點多余？

另外，如果我在客戶端使用帶有 React 的快速服務器，我會使用 react-hot-loader、webpack-hot-middleware 還是兩者都使用？ 我對采用哪種方法進行熱重載感到困惑，因為似乎有很多方法可以做到這一點。

此外，當我將 nodemon 用作包裝器 (nodemon --exec babel-node server.js) 時，我的熱模塊重新加載不起作用，但我仍然發現自己需要一種輕松重啟服務器的方法。

謝謝你。

Answer 1

除了花哨的術語，他們基本上做同樣的事情 - “留意（觀察）你的本地編輯（文件系統更改）並為你更新應用程序”，因此他們都是旨在促進的開發工具/加速你的開發過程。（不用於生產）

Nodemon負責服務器端（Express），而客戶端（React）則負責Webpack（監控模式）。

沒有太大的魔力，Nodemon只需在文件更改時重新啟動/重新加載您的快速服務器，否則您需要手動終止並重新啟動。

但是，Webpack（啟用了監視模式，通常在開發周期中）有點復雜，它會監視客戶端代碼更改，但是在幫助下

1. hot-module-replacement - 重新編譯已更改的模塊，無需完全重新加載
2. webpack-dev-middleware - 通過連接的服務器提供結果

重新編譯過程非常快，可以通過以下任一方式從本地開發服務器提供：

• webpack-dev-server提供更改的模塊和實時重新加載（連接到瀏覽器並硬刷新頁面）
• webpack-dev-middleware + Express / Koa服務器可以做同樣的事情，但你可以獲得更多的控制權，如提供靜態文件或創建一些api路由。

即使實時重新加載很酷，因為頁面的硬刷新導致應用程序失去所有客戶端狀態（打破許多開發工具，例如redux dev工具），在這種情況下， react-hot-loader開始拯救。

通常，根據您的Express + React應用程序，我會為Express設置Nodemon 。 對於React，如果你想讓一個獨立的開發服務器開箱即用，選擇webpack-dev-server + react-hot-loader ，或者你想在你現有的Express服務器上集成dev服務器並進行一些定制，請使用webpack-dev-middleware + react-hot-loader代替。 （無論如何，HMR需要添加為webpack插件）

Answer 2

可能有用（慢一點）在用 nodemon 更改后重新啟動反應服務器：：

安裝 nodemon 安裝 kill-port 后：

 npm install kill-port

並在 package.json 中編輯這部分

 "start": "kill-port 3000 && react-scripts start",

然后開始反應，只需在終端中輸入nodemon 。 希望它有用