如何在 React 应用程序中禁用文件监视

Question

编辑：

我现在的问题是，是否可以在类似生产的环境中启动带有 react-scripts 的 react 应用程序，在这种环境中，我不一定希望更改文件来影响正在运行的 react 服务器。检查下面 C 下的解决方案部分，了解我已经尝试过的内容的简要说明。

过去两周我一直在为这个问题苦苦挣扎，我不确定如何继续。我想在 Node Azure Web 应用程序 (Linux) 上托管我的 React 应用程序。

我看到的问题：

Starting the development server...

events.js:170
      throw er; // Unhandled 'error' event
      ^

Error: ENOSPC: System limit for number of file watchers reached, watch 'xxx'
    at FSWatcher.start (internal/fs/watchers.js:165:26)
    at Object.watch (fs.js:1274:11)
    at createFsWatchInstance (/home/u/work/some-repo/node_modules/chokidar/lib/nodefs-handler.js:37:15)
    at setFsWatchListener (/home/u/work/some-repo/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    ...
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! some-repo@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the some-repo@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/u/.npm/_logs/2019-08-30T09_50_59_595Z-debug.log

尝试的解决方案：

在线阅读此问题后，我了解到解决方案可能涉及

- 答：系统上没有空间。我已经检查过使用df -h，看起来有足够的空间（我的机器至少有 50%）。

B：达到文件观察器限制，这似乎是问题，但不幸的是 Azure Web 应用程序是只读文件系统，运行类似的东西echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p没有帮助。

C：禁用 React 观看。但是，我似乎无法做到这一点，如果有人知道如何禁用 React 观看，将不胜感激。到目前为止，我一直尝试CI=true npm start无济于事（当我运行命令并对文件进行更改时，更改会主动反映在我的浏览器上：localhost:3000

我还尝试在其中添加多种选项，node_modules/react-scripts/webpack.config.js例如： watch: false和ignore:/node_modules/。

谢谢，尼克

Answer 1

我建议你重新考虑你的目标to launch a react app with react-scripts in a production-like environment。

如前所述@adamz4008，您不应该在生产环境中运行开发服务器。因此，您不会遇到观看问题，也不需要解决它。

文档/最佳实践

根据软件开发最佳实践，开发有不同的阶段。

Facebook React 文档也涵盖了它们。

1. 本地开发

   npm start/yarn start

   在开发模式下运行应用程序。

   https://github.com/facebook/create-react-app#npm-start-or-yarn-start

2. 建造

   npm run build/yarn build

   将用于生产的应用程序构建到构建文件夹。

   它在生产模式下正确捆绑React并优化构建以获得最佳性能。

   构建被缩小，文件名包含哈希值。

   您的应用程序已准备好部署。

   https://github.com/facebook/create-react-app#npm-run-build-or-yarn-build

   安装 NPM 依赖项

   顺便说一句，通常人们会npm install先跑npm run build在安装所有必要的依赖项

   但我建议使用npm ci. 它具有确定性稳定的结果和更高的性能。

   https://docs.npmjs.com/cli/ci.html

3. 发布/部署

   由于您的应用程序只是一堆静态文件，因此您可以简单地将其作为静态 HTML 网站部署到任何 Web 服务器/平台。

我的经验

根据我使用 Azure 的实践经验，我将 React 应用程序作为静态网站部署到存储帐户（无需显式使用/配置任何 Web 服务器）。

https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website

您可以选择任何其他选项。