如何開發由Create-React-App 引導的應用（四）

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

系列文章

1. 如何開發由Create-React-App 引導的應用
2. 如何開發由Create-React-App 引導的應用（一）
3. 如何開發由Create-React-App 引導的應用（二）
4. 如何開發由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?

若是你在這個頁面上有更多的"How To" 的想法，請讓咱們知道或貢獻一些！