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

古人学问无遗力，少壮工夫老始成。这篇文章主要讲述如何开发由Create-React-App 引导的应用相关的知识，希望能为你提供帮助。

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

系列文章

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

Advanced Configuration你可以通过在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 默认设置此标志。

Troubleshooting npm start doesn‘t detect changes
当npm start运行时保存文件，浏览器将刷新更新的代码。
如果没有发生这种情况，请尝试以下解决方法之一：

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

如果这些解决方案没有帮助，请在此主题中留下评论。
npm test hangs on macOS Sierra
如果你运行npm test，并且控制台在打印react-scripts test --env=jsdom之后卡住，则可能是你的Watchman安装问题，如facebookincubator/create-react-app＃713https://github.com/facebookincubator/create-react-app/issues/713中所述。
我们建议你先删除项目中的node_modules并运行npm install（或者yarn如果你使用的话）。如果没有帮助，你可以尝试以下问题中提到的许多解决方法之一：

facebook/jest#1767
facebook/watchman#358
ember-cli/ember-cli#6259

据悉，安装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可以解决问题。所以如果没有其他帮助，请从系统中删除它，然后重试。
npm run build silently fails
据报道，在没有swap space的机器上，npm run build 可能会失败，这在云环境中很常见。如果症状匹配，请考虑为构建的机器添加一些swap space，或在本地构建项目。
npm run build fails on Heroku
这可能是文件名大小写敏感的问题。请参阅本节。
Someting Missing?【如何开发由Create-React-App 引导的应用】如果你在这个页面上有更多的"How To" 的想法，请让我们知道或贡献一些！