進階組態

您可以透過在 shell 中設定環境變數或使用 .env 來調整各項開發和生產設定。

注意：您不需要在以下變數之前宣告 REACT_APP_，就像在自訂環境變數中的情況一樣。

變數	開發	生產	用量
BROWSER	✅ 使用	🚫 忽略	預設情況下，Create React App 會開啟預設的系統瀏覽器，在 macOS 上優先使用 Chrome。您可以指定 瀏覽器 來覆寫這個行為，或設定成 none 來完全關閉。如果您需要自訂瀏覽器開啟的方式，您可以指定一個節點指令碼。傳遞給 npm start 的任何參數也會傳遞給此指令碼，而您的應用程式提供服務的 URL 會是最後一個參數。您的指令碼檔名必須有 .js 副檔名。
BROWSER_ARGS	✅ 使用	🚫 忽略	當指定 BROWSER 環境變數時，您設定給此環境變數的任何參數都會傳遞給瀏覽器實體。多個參數會以空白分隔的清單型態支援。預設情況下，沒有任何參數傳遞給瀏覽器。
HOST	✅ 使用	🚫 忽略	預設情況下，開發用網路伺服器會繫結至裝置上的所有主機名稱（localhost、區域網路地址等等）。您可以使用這個變數指定不同的主機。
PORT	✅ 使用	🚫 忽略	預設情況下，開發用網路伺服器會嘗試在 3000 連接埠上監聽或提示您嘗試下一個可用的連接埠。您可以使用這個變數指定不同的連接埠。
HTTPS	✅ 使用	🚫 忽略	設定為 true 時，Create React App 會以 https 模式執行開發用伺服器。
WDS_SOCKET_HOST	✅ 使用	🚫 忽略	設定時，Create React App 會以自訂的 WebSockets 主機名稱執行開發用伺服器以進行熱模組重新載入。通常，webpack-dev-server 會預設 SockJS 主機名稱為 window.location.hostname。您可以使用這個變數一次在多個 Create React App 專案上啟動本機開發。請參閱 webpack-dev-server 文件 以取得更多詳細資料。
WDS_SOCKET_PATH	✅ 使用	🚫 忽略	設定時，Create React App 會以自訂的 WebSockets 路徑執行開發用伺服器以進行熱模組重新載入。通常，webpack-dev-server 會預設 SockJS 路徑名稱為 /ws。您可以使用這個變數一次在多個 Create React App 專案上啟動本機開發。請參閱 webpack-dev-server 文件 以取得更多詳細資料。
WDS_SOCKET_PORT	✅ 使用	🚫 忽略	設定時，Create React App 會以自訂的 WebSockets 連接埠執行開發用伺服器以進行熱模組重新載入。通常，webpack-dev-server 會預設 SockJS 連接埠為 window.location.port。您可以使用這個變數一次在多個 Create React App 專案上啟動本機開發。請參閱 webpack-dev-server 文件 以取得更多詳細資料。
PUBLIC_URL	✅ 使用	✅ 使用	Create React App 預設假設您的應用程式會在服務端網路伺服器的根目錄或 package.json (homepage) 指定的子路徑中。通常，Create React App 會略過主機名稱。您可以使用這個變數強制要求資產逐字參照您提供的網址（包括主機名稱）。這在使用 CDN 來主機您的應用程式時特別有用。
BUILD_PATH	🚫 忽略	✅ 使用	預設情況下，Create React App 會將編譯的資產輸出至與您的 /src 相鄰的 /build 目錄。您可以使用這個變數指定 Create React App 輸出資產的新路徑。BUILD_PATH 應指定為相對於您的專案根目錄的路徑。
CI	✅ 使用	✅ 使用	設定為 true 時，Create React App 會將錯誤視為組建中的失敗。它還會使測試執行器停止監控。大部分 CI 預設會設定這個標誌。
REACT_EDITOR	✅ 使用	🚫 忽略	當應用程式在開發過程中發生當機，你會看到一個包含可點擊堆疊追蹤的錯誤覆疊。當你按一下時，Create React App 會試圖根據目前執行的程序來確定你使用的編輯器，並開啟相關的原始檔。你可以 發送一個拉取請求，偵測你選擇的編輯器。設定這個環境變數將會覆寫自動偵測。如果你執行此項操作，請確定你的系統 PATH 環境變數指向你的編輯器的 bin 資料夾。你也可以將其設定為 none 以完全停用它。
CHOKIDAR_USEPOLLING	✅ 使用	🚫 忽略	設為 true 時，監視程序會以輪詢模式執行，如同在 VM 中有需要時一樣。如果 npm start 沒有偵測到變更，請使用此選項。
GENERATE_SOURCEMAP	🚫 忽略	✅ 使用	設為 false 時，不會為製作版本產生原始碼對應表。這可以在一些較小的機器上解決記憶體不足 (OOM) 的問題。
INLINE_RUNTIME_CHUNK	🚫 忽略	✅ 使用	預設情況下，Create React App 會在製作階段將執行階段指令碼內嵌至 index.html。設為 false 時，不會內嵌指令碼，且會照常匯入。通常在處理 CSP 時需要這樣做。
IMAGE_INLINE_SIZE_LIMIT	✅ 使用	✅ 使用	預設情況下，小於 10,000 位元的圖片會使用 base64 編碼為資料 URI，並內嵌在 CSS 或 JS 建立產出物中。設定這個會控制以位元為單位的尺寸限制。將其設為 0 會停用圖片的內嵌。
FAST_REFRESH	✅ 使用	🚫 忽略	設為 false 時，停用 Fast Refresh 的實驗性支援，允許你在無需重新載入頁面的情況下，即時微調元件。
TSC_COMPILE_ON_ERROR	✅ 使用	✅ 使用	設為 true 時，即使有 TypeScript 類型檢查錯誤，你還是可以執行和正確建立 TypeScript 專案。這些錯誤會以警告形式印在終端機和 / 或瀏覽器主控台。
ESLINT_NO_DEV_ERRORS	✅ 使用	🚫 忽略	設為 true 時，ESLint 錯誤將在開發過程中轉換為警告。因此，ESLint 輸出將不會再出現在錯誤覆疊中。
DISABLE_ESLINT_PLUGIN	✅ 使用	✅ 使用	設為 true 時，eslint-webpack-plugin 會被完全停用。
DISABLE_NEW_JSX_TRANSFORM	✅ 使用	✅ 使用	設為 true 時，將停用 React 17 中推出的，並回溯至 React 16.14.0、15.7.0 和 0.14.10 的 新的 JSX 轉換功能。新的專案預設會使用支援此功能的 React 版本，但如果你無法升級 React，你可能需要在現有的專案中停用它。