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

React create app hot reload is not always working on linux

我使用 create-react-app 样板创建了一个 React 应用程序,它似乎非常流行,热重载有时会在任何文件更改时更新,有时则不会,似乎有最短持续时间或其他内容像那样,我正在使用 Ubuntu,节点版本 7.0,package.json 中的脚本是 npm:'react-script start' 我缺少的东西?

试试这些:

  • 关闭 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

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

虽然应用程序是 运行 npm start 并且在编辑器中更新代码应该可以使用更新的代码刷新浏览器。 如果没有发生这种情况,请尝试以下解决方法之一:

  1. 如果项目文件直接从 Dropbox 或 Google Drive 等云存储同步到您的本地系统,并且您正尝试直接 运行 应用程序,请尝试将其移出.
  2. 由于 Webpack 错误,您可能 need to restart the watcher。如果 watcher 没有检测到 index.js 而你通过文件夹名称引用它。
  3. Vim 和 IntelliJ 等编辑器中的安全写入 功能目前会破坏观察者。您将需要 disable it.
  4. 由于 Webpack watcher bug,路径包含括号的项目会导致问题,请尝试将项目移动到没有括号的路径。 .
  5. 要在 Linux 和 macOS 中允许更多观察者,您可能需要 tweak system settings
  6. 如果项目 运行 在虚拟机中,例如(Vagrant 提供的)VirtualBox,如果项目目录不存在,请在项目目录中创建一个 .env 文件,然后添加 CHOKIDAR_USEPOLLING=true 到它。这确保下次您 运行 npm start 时,观察者会根据需要在 VM 内使用轮询模式。
  7. 可以尝试增加 max_users_watches- link

更多参考资料:

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 应用程序。

显然热模块重新加载仅在您弹出您的应用程序时开箱即用。

但是如果你还没有弹出你的应用程序,那么你可以按照these instructions让它工作。

在您的应用程序顶部找到 ReactDOM.render(...),然后在其下方添加以下行:

ReactDOM.render(...);

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

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

我刚刚遇到的另一个案例是并行使用多个版本的 nodejs 和 NVM。基本上,我有两个终端 windows,一个 运行 节点 10.x,另一个在节点 9.x 上,Webpack watcher 不再看到变化。

解决方案是将两者带到同一个节点版本

我能够使用以下方法完成这项工作:

sudo npm start

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

对我有用(ubuntu 18.04.3 LTS)

运行 这个命令

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

sudo npm start

我对 linux 了解不多,但这可能是由于防火墙设置所致,因为我在 windows 中做了同样的事情,为了启动 React 开发服务器,我们需要授予访问权限通过防火墙,所以要在这里做同样的事情,我们需要给它管理员权限(sudo 在 ubuntu linux 分布的情况下)。

如果您启动应用程序时出现一堆错误,它似乎会停止监视您的文件,因此不会检测到您对损坏文件的修复。似乎您需要启动“启动”,但不会出现太多 many/severe 错误,文件观察程序才能工作。