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

標籤：webp   輪詢   sierra   運行時   忽略   bubuko   relative   trouble   pack   

此文章是翻譯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-serverbrew updatebrew 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" 的想法，請讓我們知道或貢獻一些！

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