React 创建应用程序热重载并不总是在 linux 上工作

Posted 2023-02-22

技术标签:

【中文标题】React 创建应用程序热重载并不总是在 linux 上工作【英文标题】：React create app hot reload is not always working on linux 【发布时间】：2017-06-20 06:35:20 【问题描述】：

我使用 create-react-app 样板创建了一个反应应用程序，这似乎很流行，热重载有时会在任何文件更改时更新，有时不会，似乎有最短持续时间或类似的东西，我使用的是 Ubuntu，节点版本 7.0，package.json 中的脚本是 npm:'react-script start' 我缺少什么？

【问题讨论】：

您是在使用任何 IDE 还是直接从控制台启动它？ @AdolfoOnrubia 命令行，我使用 react-script start.. 我的意思是你如何编辑和管理你的项目文件，也许一个错字导致反应不更新。修复代码错误，它将重新加载。嗯我不这么认为..它有时正常工作...然后停止..然后工作...没有规则... 【参考方案1】：

当 npm start 未检测到更改时，以下是create-react-app 文档 - link 中提供的常见故障排除步骤。

当应用程序使用npm start 运行时，编辑器中的更新代码可能会使用更新后的代码刷新浏览器。如果没有发生这种情况，请尝试以下解决方法之一：

安全写入

.env

CHOKIDAR_USEPOLLING=true

npm start

max_users_watches

更多参考资料：

Issue Tracker 1 Troubleshooting webpack Issue Tracker 2 - Webpack polling

【讨论】：

当热重载突然无故停止工作时，增加 max_users_watches 效果很好。这是 6。对我来说，该解决方案适用于虚拟盒子（我正在使用），谢谢！啊。选项 6 也是我的问题。我正在使用适用于 Linux (WSL 2) 的 windows 子系统，这 6 个对我有用【参考方案2】：

试试这些：

在 IDE 中关闭安全写入增加max_user_watches 您的路径不应有括号

作为最后的手段尝试使用它作为你的环境变量： CHOKIDAR_USEPOLLING=true npm start

来源： https://github.com/facebookincubator/create-react-app/issues/659 https://github.com/facebookincubator/create-react-app/issues/1049#issuecomment-261731734

【讨论】：

你甚至无法想象我花了多少小时来修复热重载问题......只有你的回答有帮助，非常感谢！你是我的上帝）所有其他变通办法都没有运气，但你的最后手段奏效了。我的环境是 Ubuntu、VS Code、CRA。最后一个 CHOKIDAR_USEPOLLING 环境变量为我完成了诀窍，但它大大减慢了我的虚拟机速度。有什么线索吗？ CHOKIDAR_USEPOLLING=true 可以让您考虑使用另一个环境变量 CHOKIDAR_INTERVAL=2000 。这限制了 CHOKIDAR 轮询方法使用的 CPU 量【参考方案3】：

我能够使用：

sudo npm start

【讨论】：

对我不起作用，但 CHOKIDAR_USEPOLLING=true npm start 起作用了。 WSL Ubuntu 20【参考方案4】：

运行这个命令

sudo -i
echo 1048576 > /proc/sys/fs/inotify/max_user_watches
exit

【讨论】：

【参考方案5】：

在 unbuntu 中，我基本上杀死了所有在端口上运行的进程（对于 react 应用程序默认为：3000）。

列出所有在 3000 端口上运行的进程。

lsof -i :3000

此命令将显示类似这样的内容。

COMMAND   PID USER   FD   TYPE  DEVICE SIZE/OFF NODE NAME
node     7429 yipl   19u  IPv4 1081760      0t0  TCP localhost:3000->localhost:35762 (ESTABLISHED)
chrome  26448 yipl  177u  IPv4 1080082      0t0  TCP localhost:35762->localhost:3000 (ESTABLISHED)

现在通过 PID 杀死进程。

kill -9 7429
kill -9 26488

再次启动您的 react 应用。

【讨论】：

【参考方案6】：

如果您退出您的应用，显然热模块重新加载只能开箱即用。

但是如果您还没有退出您的应用，那么您可以关注these instructions 以使其正常运行。

在您的应用顶部找到ReactDOM.render(...)，并在其下方添加以下几行：

ReactDOM.render(...);

if (module.hot) 
  module.hot.accept('./App', () => 
    // --- Copy-paste your usual ReactDOM.render(...) call here: --- //
    ReactDOM.render(...);
  );

上面链接的说明还显示了如何热重载组件树之外的东西，例如 redux reducer。

【讨论】：

【参考方案7】：

我刚刚遇到的另一个案例是在并行使用多个版本的 nodejs 和 NVM 时。基本上，我有两个终端窗口，一个运行节点 10.x，另一个运行节点 9.x，Webpack 观察程序停止看到变化。

解决方案是将两者带到相同的节点版本

【讨论】：

【参考方案8】：

尝试删除 node_modules 文件夹并重新安装通过使用 cmd npm install

为我工作（ubuntu 18.04.3 LTS）

【讨论】：

【参考方案9】：

sudo npm start