如何开发由Create-React-App 引导的应用（四）

2022-08-16 23:06:07

此文章是翻译How to develop apps bootstrapped with Create React App 官方文档

系列文章

你可以通过在shell中设置环境变量或.env来调整各种开发和生产设置。

Variable	Development	Production	Usage
BROWSER			默认情况下，Create React App 将打开默认系统浏览器，在Mac OS上支持Chrome。指定浏览器来覆盖此行为，或将其设置为`none`以完全禁用它。
HOST			默认情况下，开发Web服务器绑定到`localhost`。你可以使用此变量来指定不同的主机。
PORT			默认情况下，开发Web服务器将尝试在端口3000上侦听或提示你尝试下一个可用端口。你可以使用此变量来指定不同的端口。
HTTPS			当设置为 `true` 时, Create React App 将以`https` 模式运行开发Web服务器。
PUBLIC_URL			Create React App 假定你的应用程序托管在Web服务器的根目录或在`package.json`（`homepage`）中指定的子路径。通常，Create React App 忽略hostname。你可以使用此变量强制将资源逐字引用到你提供的URL（包含hostname）。当使用CDN托管你的应用程序时，这可能特别有用。
CI			当设置为`true` 时, Create React App 将警告视为构建中的失败。它也使test runner 处于非观察者模式. 大多数CI 默认设置此标志。

当npm start运行时保存文件，浏览器将刷新更新的代码。

如果没有发生这种情况，请尝试以下解决方法之一：

如果你的项目在Dropbox文件夹中，请尝试将其移出。
如果观察者看不到名为index.js的文件，并且你通过文件夹名称引用它，则需要重新启动观察者，这是Webpack错误导致的。
一些像Vim和IntelliJ这样的编辑器有一个“安全写入”功能，目前会打断观察者。你需要禁用它。按照“使用支持安全写入的编辑器”中的说明进行操作。
如果你的项目路径包含括号，请尝试将项目移动到没有它们的路径。这是由Webpack观察者错误引起的。
在Linux和macOS上，你可能需要调整系统设置以允许更多观察者。
如果项目在虚拟机中运行，如虚拟机（Virtual Vagrant），则在项目目录中创建一个.env文件，如果它不存在，并向其添加CHOKIDAR_USEPOLLING=true。这样可以确保下次运行npm start时，观察者会根据需要在VM中使用轮询模式。

如果这些解决方案没有帮助，请在此主题中留下评论。

如果你运行npm test，并且控制台在打印react-scripts test --env=jsdom之后卡住，则可能是你的Watchman安装问题，如facebookincubator/create-react-app＃713 https://github.com/facebookincubator/create-react-app/issues/713中所述。

我们建议你先删除项目中的node_modules并运行npm install（或者yarn如果你使用的话）。如果没有帮助，你可以尝试以下问题中提到的许多解决方法之一：

据悉，安装Watchman 4.7.0或更新版本可以解决此问题。如果你使用Homebrew，则可以运行这些命令来更新它们：

watchman shutdown-server

brew update

brew reinstall watchman

你可以在Watchman文档页面上找到其他安装方法。

如果仍然没有帮助，请尝试运行launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist。

还有报告说，卸载Watchman可以解决问题。所以如果没有其他帮助，请从系统中删除它，然后重试。

据报道，在没有swap space的机器上，npm run build 可能会失败，这在云环境中很常见。如果症状匹配，请考虑为构建的机器添加一些swap space，或在本地构建项目。

这可能是文件名大小写敏感的问题。请参阅本节。

如果你在这个页面上有更多的"How To" 的想法，请让我们知道或贡献一些！