Custom Blog Content Maker
1.0.0
簡單的 React 應用程序，用於從 API 獲取數據並將其顯示為帖子 該項目是透過 Create React App 啟動的。
您將在下面找到有關如何執行常見任務的一些資訊。
您可以在此處找到本指南的最新版本。
<title>public資料夾public資料夾.env中加入開發環境變數<meta>標籤npm start未偵測到更改npm test在 macOS Sierra 上掛起npm run build退出太早npm run build在 Heroku 上失敗npm run build無法縮小Create React App分為兩個套件：
create-react-app是一個全域命令列實用程序，用於建立新專案。react-scripts是產生的專案（包括這個專案）中的開發依賴項。您幾乎不需要更新create-react-app本身：它將所有設定委託給react-scripts 。
當您執行create-react-app時，它始終使用最新版本的react-scripts建立項目，因此您將自動獲得新建立的應用程式中的所有新功能和改進。
若要將現有專案更新至新版本的react-scripts ，請開啟變更日誌，找到您目前使用的版本（如果不確定，請檢查此資料夾中的package.json ），然後套用較新版本的遷移說明版本。
在大多數情況下，在package.json中更改react-scripts版本並在此資料夾中執行npm install就足夠了，但最好查閱變更日誌以了解潛在的重大變更。
我們致力於將重大變更保持在最低限度，以便您可以輕鬆升級react-scripts 。
我們隨時歡迎您的回饋。
創建後，您的項目應如下所示：
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
對於要建置的項目，這些文件必須以準確的檔案名稱存在：
public/index.html是頁面模板；src/index.js是 JavaScript 入口點。您可以刪除或重新命名其他檔案。
您可以在src內建立子目錄。為了更快重建，Webpack 僅處理src內的檔案。
您需要將所有 JS 和 CSS 檔案放入src中，否則 Webpack 將看不到它們。
public/index.html中只能使用public內的文件。
請閱讀下面的說明，以了解如何使用 JavaScript 和 HTML 中的資源。
但是，您可以建立更多頂級目錄。
它們不會包含在生產版本中，因此您可以將它們用於文件等內容。
在專案目錄中，您可以運行：
npm start在開發模式下運行應用程式。
在瀏覽器中開啟http://localhost:3000即可查看。
如果您進行編輯，頁面將重新載入。
您還將在控制台中看到任何 lint 錯誤。
npm test在互動式監視模式下啟動測試運行程式。
有關詳細信息，請參閱有關運行測試的部分。
npm run build將用於生產的應用程式建置到build資料夾。
它在生產模式下正確捆綁 React 並優化構建以獲得最佳性能。
建置被縮小，檔案名稱包含哈希值。
您的應用程式已準備好部署！
有關詳細信息，請參閱有關部署的部分。
npm run eject注意：這是一種單向操作。一旦eject ，就無法再返回！
如果您對建置工具和配置選擇不滿意，可以隨時eject 。此命令將從您的專案中刪除單一建置依賴項。
相反，它會將所有設定檔和傳遞依賴項（Webpack、Babel、ESLint 等）複製到您的專案中，以便您可以完全控制它們。除eject之外的所有命令仍然有效，但它們將指向複製的腳本，以便您可以調整它們。此時你只能靠自己了。
您不必使用eject 。精選的功能集適合中小型部署，您不應該覺得有義務使用此功能。但是我們知道，如果您在準備好使用時無法對其進行自訂，則該工具將沒有用處。
預設情況下，產生的項目使用最新版本的React。
您可以參閱 React 文件以取得有關支援的瀏覽器的更多資訊。
此專案支援最新 JavaScript 標準的超集。
除了ES6語法特性外，也支援：
了解有關不同提案階段的更多資訊。
雖然我們建議謹慎使用實驗性提案，但 Facebook 在產品代碼中大量使用這些功能，因此如果這些提案將來發生任何變化，我們打算提供程式碼修改。
請注意，該項目僅包含一些 ES6 polyfill ：
Object.assign()透過object-assign 。promise來Promise 。whatwg-fetch fetch() 。如果您使用任何其他需要執行時間支援的 ES6+ 功能（例如Array.from()或Symbol ），請確保您手動包含適當的 polyfill，或者您的目標瀏覽器已經支援它們。
另請注意，使用一些較新的語法功能（例如for...of或[...nonArrayValue]會導致 Babel 發出依賴 ES6 運行時功能的程式碼，並且如果沒有 polyfill，可能無法運作。如有疑問，請使用 Babel REPL 來查看特定語法編譯後的結果。
若要在您喜歡的文字編輯器中設定語法反白顯示，請前往相關的 Babel 文件頁面並依照指示操作。涵蓋了一些最受歡迎的編輯器。
注意：此功能適用於
[email protected]及更高版本。
它也僅適用於 npm 3 或更高版本。
一些編輯器（包括 Sublime Text、Atom 和 Visual Studio Code）提供了 ESLint 外掛程式。
它們不需要進行 linting。您應該可以在終端機和瀏覽器控制台中看到 linter 輸出。但是，如果您希望 lint 結果直接顯示在編輯器中，則可以執行一些額外的步驟。
您需要先為您的編輯器安裝 ESLint 外掛程式。然後，將一個名為.eslintrc的檔案加入到專案根目錄：
{
"extends" : "react-app"
}現在您的編輯器應該報告 linting 警告。
請注意，即使您進一步編輯.eslintrc文件，這些更改也只會影響編輯器整合。它們不會影響終端機和瀏覽器內的 lint 輸出。這是因為 Create React App 有意提供了一組最小的規則來發現常見錯誤。
如果您想為專案強制實施程式設計風格，請考慮使用 Prettier 而不是 ESLint 風格規則。
目前僅 Visual Studio Code 和 WebStorm 支援此功能。
Visual Studio Code 和 WebStorm 支援使用 Create React App 進行開箱即用的偵錯。這使您作為開發人員能夠在不離開編輯器的情況下編寫和調試React 程式碼，最重要的是，它使您能夠擁有連續的開發工作流程，其中上下文切換最少，因為您不必在工具之間切換。
您需要安裝最新版本的 VS Code 和 VS Code Chrome 偵錯器擴充功能。
然後將下面的區塊新增到您的launch.json檔案中，並將其放入應用程式根目錄的.vscode資料夾中。
{
"version" : " 0.2.0 " ,
"configurations" : [{
"name" : " Chrome " ,
"type" : " chrome " ,
"request" : " launch " ,
"url" : " http://localhost:3000 " ,
"webRoot" : " ${workspaceRoot}/src " ,
"sourceMapPathOverrides" : {
"webpack:///src/*" : " ${webRoot}/* "
}
}]
}注意：如果您透過 HOST 或 PORT 環境變數進行調整，則 URL 可能會有所不同。
透過執行npm start啟動應用程序，然後按F5或按一下綠色偵錯圖示在 VS Code 中開始偵錯。現在您可以編寫程式碼、設定斷點、更改程式碼以及調試新修改的程式碼——所有這些都可以透過編輯器進行。
VS Code 除錯有問題嗎？請參閱他們的故障排除指南。
您需要安裝 WebStorm 和 JetBrains IDE 支援 Chrome 擴充功能。
在 WebStorm 選單Run中選擇Edit Configurations... 。然後按一下+並選擇JavaScript Debug 。將http://localhost:3000貼到 URL 欄位並儲存設定。
注意：如果您透過 HOST 或 PORT 環境變數進行調整，則 URL 可能會有所不同。
透過執行npm start啟動您的應用程序，然後在 macOS 上按^D或在 Windows 和 Linux 上按F9 ，或按一下綠色偵錯圖示開始在 WebStorm 中進行偵錯。
您可以使用相同的方式在 IntelliJ IDEA Ultimate、PhpStorm、PyCharm Pro 和 RubyMine 中偵錯應用程式。
Prettier 是一個固執己見的程式碼格式化程序，支援 JavaScript、CSS 和 JSON。使用 Prettier，您可以格式化自動編寫的程式碼，以確保專案中的程式碼風格。請參閱 Prettier 的 GitHub 頁面以了解更多信息，並查看此頁面以了解其實際情況。
為了在 git 中提交時格式化我們的程式碼，我們需要安裝以下相依性：
npm install --save husky lint-staged prettier或者你可以使用yarn ：
yarn add husky lint-staged prettierhusky讓使用 githooks 變得很容易，就好像它們是 npm 腳本一樣。lint-staged允許我們在 git 中的暫存檔案上執行腳本。請參閱這篇關於 lint-staged 的部落格文章以了解更多資訊。prettier是我們將在提交之前運行的 JavaScript 格式化程式。現在，我們可以透過在專案根目錄中的package.json新增幾行來確保每個檔案的格式正確。
將以下行新增至scripts部分：
"scripts": {
+ "precommit": "lint-staged",
"start": "react-scripts start",
"build": "react-scripts build",接下來，我們為package.json新增一個 'lint-staged' 字段，例如：
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,json,css}": [
+ "prettier --single-quote --write",
+ "git add"
+ ]
+ },
"scripts": {現在，每當您進行提交時，Prettier 都會自動格式化更改的文件。您也可以執行./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}"來首次格式化整個專案。
接下來，您可能想將 Prettier 整合到您最喜歡的編輯器中。閱讀 Prettier GitHub 頁面上有關編輯器整合的部分。
<title>您可以在產生的專案的public資料夾中找到來源 HTML 檔案。您可以編輯其中的<title>標籤，將標題從「React App」變更為其他任何內容。
請注意，通常您不會經常編輯public中的檔案。例如，新增樣式表無需接觸 HTML。
如果您需要根據內容動態更新頁面標題，可以使用瀏覽器document.title API。對於更複雜的場景，當您想要變更 React 元件的標題時，可以使用第三方函式庫 React Helmet。
如果您在生產中為應用程式使用自訂伺服器，並且希望在將標題傳送到瀏覽器之前修改標題，則可以按照本節中的建議進行操作。或者，您可以將每個頁面預先建立為靜態 HTML 文件，然後載入 JavaScript 包，這將在此處介紹。
產生的項目包含 React 和 ReactDOM 作為依賴項。它還包括 Create React App 用作開發依賴項的一組腳本。您可以使用npm安裝其他依賴項（例如 React Router）：
npm install --save react-router或者你可以使用yarn ：
yarn add react-router這適用於任何函式庫，而不僅僅是react-router 。
由於 Babel，此專案設定支援 ES6 模組。
雖然您仍然可以使用require()和module.exports ，但我們鼓勵您改用import和export 。
例如：
Button.js import React , { Component } from 'react' ;
class Button extends Component {
render ( ) {
// ...
}
}
export default Button ; // Don’t forget to use export default!DangerButton.js import React , { Component } from 'react' ;
import Button from './Button' ; // Import a component from another file
class DangerButton extends Component {
render ( ) {
return < Button color = "red" /> ;
}
}
export default DangerButton ;請注意預設導出和命名導出之間的差異。這是錯誤的常見來源。
當模組僅匯出單一內容（例如元件）時，我們建議您堅持使用預設匯入和匯出。這就是當您使用export default Button和import Button from './Button'時得到的結果。
命名導出對於導出多個函數的實用程式模組很有用。一個模組最多可以有一個預設導出和任意多個命名導出。
了解有關 ES6 模組的更多資訊：
程式碼分割允許您將程式碼分割成小塊，然後您可以根據需要加載，而不是在用戶可以使用它之前下載整個應用程式。
此專案設定支援透過動態import()進行程式碼分割。它的提案處於Promise import()階段。
這是一個例子：
moduleA.js const moduleA = 'Hello' ;
export { moduleA } ;App.js import React , { Component } from 'react' ;
class App extends Component {
handleClick = ( ) => {
import ( './moduleA' )
. then ( ( { moduleA } ) => {
// Use moduleA
} )
. catch ( err => {
// Handle failure
} ) ;
} ;
render ( ) {
return (
< div >
< button onClick = { this . handleClick } > Load </ button >
</ div >
) ;
}
}
export default App ;這將使moduleA.js及其所有獨特的依賴項成為一個單獨的區塊，僅在使用者點擊「載入」按鈕後載入。
如果您願意，您也可以將其與async / await語法一起使用。
如果您正在使用 React Router，請查看本教學課程，以了解如何使用程式碼拆分。您可以在此處找到配套的 GitHub 儲存庫。
請同時查看 React 文件中的程式碼拆分部分。
此專案設定使用 Webpack 來處理所有資產。 Webpack 提供了一種import概念「擴充」到 JavaScript 之外的自訂方式。為了表達 JavaScript 文件依賴 CSS 文件，您需要從 JavaScript 文件匯入 CSS ：
Button.css. Button {
padding : 20 px ;
}Button.js import React , { Component } from 'react' ;
import './Button.css' ; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render ( ) {
// You can use them as regular CSS styles
return < div className = "Button" /> ;
}
}這對於 React 來說不是必需的，但很多人發現這個功能很方便。您可以在此處了解此方法的優點。然而，您應該意識到，這使得您的程式碼比 Webpack 更難移植到其他建置工具和環境。
在開發中，以這種方式表達依賴關係允許您在編輯樣式時即時重新載入樣式。在生產中，所有 CSS 檔案將在建置輸出中連接成一個縮小的.css檔案。
如果您擔心使用 Webpack 特定的語義，您可以將所有 CSS 直接放入src/index.css中。它仍然會從src/index.js匯入，但如果您稍後遷移到不同的建置工具，您可以隨時刪除該導入。
此專案設定會縮小您的 CSS 並透過 Autoprefixer 自動新增供應商前綴，因此您無需擔心它。
例如，這個：
. App {
display : flex;
flex-direction : row;
align-items : center;
}變成這樣：
. App {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-orient : horizontal;
-webkit-box-direction : normal;
-ms-flex-direction : row;
flex-direction : row;
-webkit-box-align : center;
-ms-flex-align : center;
align-items : center;
}如果您出於某種原因需要停用自動前綴，請按照本節操作。
一般來說，我們建議您不要在不同的元件中重複使用相同的 CSS 類別。例如，我們建議不要在<AcceptButton>和<RejectButton>元件中使用.Button CSS 類，而是建立一個具有自己的.Button樣式的<Button>元件， <AcceptButton>和<RejectButton>都可以渲染（但不能渲染）繼承）。
遵循這條規則通常會降低 CSS 預處理器的用處，因為 mixin 和巢狀等功能會被元件組合取代。但是，如果您發現 CSS 預處理器有價值，則可以整合它。在本演練中，我們將使用 Sass，但您也可以使用 Less 或其他替代方案。
首先，讓我們安裝 Sass 的命令列介面：
npm install --save node-sass-chokidar或者你可以使用yarn ：
yarn add node-sass-chokidar然後在package.json中，將以下行加入scripts ：
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",注意：要使用不同的預處理器，請根據預處理器的文件取代
build-css和watch-css命令。
現在您可以將src/App.css重新命名為src/App.scss並執行npm run watch-css 。觀察者將在src子目錄中找到每個 Sass 文件，並在其旁邊創建相應的 CSS 文件，在我們的例子中覆蓋src/App.css 。由於src/App.js仍然導入src/App.css ，因此樣式成為應用程式的一部分。現在您可以編輯src/App.scss ，並且src/App.css將重新產生。
要在 Sass 檔案之間共享變量，可以使用 Sass 導入。例如， src/App.scss和其他元件樣式檔案可以包含@import "./shared.scss";與變數定義。
若要在不使用相對路徑的情況下匯入文件，可以將--include-path選項新增至package.json中的命令。
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
這將允許您進行導入，例如
@import ' styles/_colors.scss ' ; // assuming a styles directory under src/
@import ' nprogress/nprogress ' ; // importing a css file from the nprogress node module此時，您可能希望從原始碼管理中刪除所有 CSS 文件，並將src/**/*.css新增至.gitignore文件中。將建置產品置於原始碼控制之外通常是一個很好的做法。
最後一步，您可能會發現使用npm start自動執行watch-css很方便，並將build-css作為npm run build的一部分運行。您可以使用&&運算子順序執行兩個腳本。但是，沒有跨平台的方法來並行運行兩個腳本，因此我們將為此安裝一個套件：
npm install --save npm-run-all或者你可以使用yarn ：
yarn add npm-run-all然後我們可以更改start和build腳本以包含 CSS 預處理器命令：
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}現在執行npm start和npm run build也會建置 Sass 檔案。
為什麼選擇node-sass-chokidar ？
據報告， node-sass有以下問題：
根據報告，在虛擬機器中或與 docker 一起使用時， node-sass --watch在某些情況下會出現效能問題。
無限樣式編譯#1939
根據報告， node-sass在偵測目錄中的新檔案時有問題 #1891
這裡使用node-sass-chokidar來解決這些問題。
使用 Webpack，使用圖片和字體等靜態資源的工作方式與 CSS 類似。
您可以直接在 JavaScript 模組中import檔案。這告訴 Webpack 將該檔案包含在套件中。與 CSS 導入不同，導入檔案會為您提供一個字串值。該值是您可以在程式碼中引用的最終路徑，例如作為圖像的src屬性或 PDF 連結的href 。
為了減少對伺服器的請求數量，導入小於 10,000 位元組的映像會傳回資料 URI 而不是路徑。這適用於以下檔案副檔名：bmp、gif、jpg、jpeg 和 png。由於 #1153，SVG 檔案被排除。
這是一個例子：
import React from 'react' ;
import logo from './logo.png' ; // Tell Webpack this JS file uses this image
console . log ( logo ) ; // /logo.84287d09.png
function Header ( ) {
// Import result is the URL of your image
return < img src = { logo } alt = "Logo" /> ;
}
export default Header ;這確保了專案建置時，Webpack 能夠正確地將映像移至建置資料夾中，並為我們提供正確的路徑。
這也適用於 CSS：
. Logo {
background-image : url (. / logo.png);
} Webpack 會尋找 CSS 中的所有相關模組引用（以./開頭），並將它們替換為編譯套件中的最終路徑。如果您輸入錯誤或意外刪除重要文件，您將看到編譯錯誤，就像導入不存在的 JavaScript 模組一樣。編譯後的套件中的最終檔名由 Webpack 根據內容雜湊產生。如果檔案內容將來發生變化，Webpack 將在生產中為其指定不同的名稱，因此您無需擔心資產的長期快取。
請注意，這也是 Webpack 的自訂功能。
React 不需要它，但很多人喜歡它（React Native 對圖像使用類似的機制）。
下一節將介紹處理靜態資產的另一種方法。
public資料夾注意：此功能適用於
[email protected]及更高版本。
public包含 HTML 文件，因此您可以對其進行調整，例如設定頁面標題。帶有已編譯程式碼的<script>標記將在建置過程中自動新增到其中。
您也可以將其他資產新增至public 。
請注意，我們通常會鼓勵您改為import JavaScript 檔案中的資源。例如，請參閱有關新增樣式表以及新增圖像和字體的部分。該機制提供了許多好處：
但是，您可以使用逃生艙口在模組系統之外添加資產。
如果將檔案放入public資料夾中，Webpack不會處理該檔案。相反，它將原封不動地複製到建置資料夾中。若要引用public資料夾中的資源，您需要使用名為PUBLIC_URL的特殊變數。
在index.html中，你可以像這樣使用它：
< link rel =" shortcut icon " href =" %PUBLIC_URL%/favicon.ico " >只有public夾內的檔案才能透過%PUBLIC_URL%前綴存取。如果您需要使用src或node_modules中的文件，則必須將其複製到那裡以明確指定使該文件成為建置的一部分的意圖。
當您執行npm run build時，Create React App 會將%PUBLIC_URL%替換為正確的絕對路徑，因此即使您使用用戶端路由或將其託管在非根 URL 上，您的專案也能正常運作。
在 JavaScript 程式碼中，您可以使用process.env.PUBLIC_URL實現類似目的：
render ( ) {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return < img src = { process . env . PUBLIC_URL + '/img/logo.png' } /> ;
}請記住這種方法的缺點：
public中的任何檔案都不會被後處理或縮小。public資料夾通常我們建議從 JavaScript 匯入樣式表、圖像和字體。 public可作為解決許多不太常見情況的方法：
manifest.webmanifest 。pace.js<script>標記。請注意，如果您新增聲明全域變數的<script> ，您還需要閱讀下一節有關使用它們的內容。
當您在 HTML 檔案中包含定義全域變數的腳本並嘗試在程式碼中使用這些變數之一時，linter 會抱怨，因為它無法看到變數的定義。
您可以透過從window物件明確讀取全域變數來避免這種情況，例如：
const $ = window . $ ;這表明您是故意使用全局變量，而不是因為拼寫錯誤。
或者，您可以透過在後面加上// eslint-disable-line來強制 linter 忽略任何行。
您不必將 React Bootstrap 與 React 一起使用，但它是一個用於將 Bootstrap 與 React 應用程式整合的流行函式庫。如果您需要，可以按照以下步驟將其與 Create React App 整合：
從 npm 安裝 React Bootstrap 和 Bootstrap。 React Bootstrap 不包含 Bootstrap CSS，因此也需要安裝：
npm install --save react-bootstrap bootstrap@3或者你可以使用yarn ：
yarn add react-bootstrap bootstrap@3在src/index.js檔案的開頭匯入 Bootstrap CSS 和可選的 Bootstrap 主題 CSS：
import 'bootstrap/dist/css/bootstrap.css' ;
import 'bootstrap/dist/css/bootstrap-theme.css' ;
// Put any other imports below so that CSS from your
// components takes precedence over default styles.在src/App.js檔案或自訂元件檔案中匯入所需的 React Bootstrap 元件：
import { Navbar , Jumbotron , Button } from 'react-bootstrap' ;現在您可以在 render 方法中定義的元件層次結構中使用匯入的 React Bootstrap 元件了。以下是使用 React Bootstrap 重做的App.js範例。
有時您可能需要調整 Bootstrap（或等效套件）的視覺樣式。
我們建議採用以下方法：
以下是新增遵循以下步驟的自訂 Bootstrap 的範例。
Flow 是一個靜態類型檢查器，可協助您編寫錯誤更少的程式碼。如果您不熟悉這個概念，請查看有關在 JavaScript 中使用靜態類型的介紹。
Flow 的最新版本可以開箱即用地使用 Create React App 專案。
若要將 Flow 新增至 Create React App 項目，請依照下列步驟操作：
npm install --save flow-bin （或yarn add flow-bin ）。"flow": "flow"加入package.json的scripts部分。npm run flow init （或yarn flow init ）以在根目錄中建立.flowconfig檔。// @flow新增至您想要類型檢查的任何檔案（例如，新增至src/App.js ）。現在您可以執行npm run flow （或yarn flow ）來檢查檔案是否有類型錯誤。您可以選擇使用 Nuclide 等 IDE 以獲得更好的整合體驗。未來我們計劃將其更緊密地整合到 Create React App 中。
要了解有關 Flow 的更多信息，請查看其文件。
Create React App 沒有規定特定的路由解決方案，但 React Router 是最受歡迎的一種。
要添加它，請運行：
npm install --save react-router-dom或者你可以使用yarn ：
yarn add react-router-dom要嘗試它，請刪除src/App.js中的所有程式碼並將其替換為其網站上的任何範例。基本範例是一個很好的起點。
請注意，在部署應用程式之前，您可能需要設定生產伺服器以支援客戶端路由。
注意：此功能適用於
[email protected]及更高版本。
您的專案可以使用在您的環境中聲明的變量，就像它們是在您的 JS 檔案中本地聲明的一樣。預設情況下，您將為您定義NODE_ENV以及以REACT_APP_開頭的任何其他環境變數。
環境變數是在建構時嵌入的。由於 Create React App 會產生靜態 HTML/CSS/JS 包，因此它不可能在執行時間讀取它們。要在運行時讀取它們，您需要將 HTML 加載到伺服器上的記憶體中並在運行時替換佔位符，就像此處所述。或者，您可以在更改應用程式時隨時在伺服器上重建應用程式。
注意：您必須建立以
REACT_APP_開頭的自訂環境變數。除NODE_ENV之外的任何其他變數都將被忽略，以避免意外暴露機器上可能具有相同名稱的私鑰。更改任何環境變數都將要求您重新啟動正在執行的開發伺服器。
這些環境變數將在process.env上為您定義。例如，名為REACT_APP_SECRET_CODE的環境變數將在 JS 中公開為process.env.REACT_APP_SECRET_CODE 。
還有一個特殊的內建環境變量，稱為NODE_ENV 。您可以從process.env.NODE_ENV讀取它。當您執行npm start時，它總是等於'development' ，當您執行npm test時，它總是等於'test' ，當您執行npm run build來製作生產套件時，它總是等於'production' 。您無法手動覆蓋NODE_ENV 。這可以防止開發人員意外地將緩慢的開發版本部署到生產中。
這些環境變數可用於根據專案的部署位置有條件地顯示資訊或使用版本控制以外的敏感資料。
首先，您需要定義環境變數。例如，假設您想要使用<form>內的環境中定義的秘密：
render ( ) {
return (
< div >
< small > You are running this application in < b > { process . env . NODE_ENV } </ b > mode. </ small >
< form >
< input type = "hidden" defaultValue = { process . env . REACT_APP_SECRET_CODE } />
</ form >
</ div >
) ;
}在建置過程中， process.env.REACT_APP_SECRET_CODE將替換為REACT_APP_SECRET_CODE環境變數的目前值。請記住， NODE_ENV變數將自動為您設定。
當您在瀏覽器中載入應用程式並檢查<input>時，您將看到其值設為abcdef ，而粗體文字將顯示使用npm start時提供的環境：
< div >
< small > You are running this application in < b > development </ b > mode. </ small >
< form >
< input type =" hidden " value =" abcdef " />
</ form >
</ div >上面的形式正在從環境中尋找名為REACT_APP_SECRET_CODE的變數。為了使用這個值，我們需要在環境中定義它。這可以透過兩種方式完成：在 shell 中或在.env檔案中。這兩種方式將在接下來的幾節中進行描述。
存取NODE_ENV對於有條件執行操作也很有用：
if ( process . env . NODE_ENV !== 'production' ) {
analytics . disable ( ) ;
}當您使用npm run build編譯應用程式時，縮小步驟將消除此條件，並且產生的套件會更小。
注意：此功能適用於
[email protected]及更高版本。
您也可以存取public/index.html中以REACT_APP_開頭的環境變數。例如：
< title > %REACT_APP_WEBSITE_NAME% </ title >請注意，上述部分的警告適用：
NODE_ENV和PUBLIC_URL ）之外，變數名稱必須以REACT_APP_開頭才能運作。定義環境變數可能因作業系統而異。同樣重要的是要知道這種方式對於 shell 會話的生命週期來說是暫時的。
set " REACT_APP_SECRET_CODE = abcdef " && npm start（注意：變數賦值周圍需要引號以避免尾隨空格。）
( $ env: REACT_APP_SECRET_CODE = " abcdef " ) -and (npm start)REACT_APP_SECRET_CODE=abcdef npm start.env中加入開發環境變數注意：此功能適用於
[email protected]及更高版本。
若要定義永久環境變量，請在專案的根目錄中建立名為.env的檔案：
REACT_APP_SECRET_CODE=abcdef
注意：您必須建立以
REACT_APP_開頭的自訂環境變數。除NODE_ENV之外的任何其他變數都將被忽略，以避免意外暴露機器上可能具有相同名稱的私鑰。更改任何環境變數都將要求您重新啟動正在執行的開發伺服器。
.env檔案應簽入原始碼管理（不包括.env*.local ）。
.env檔？注意：此功能適用於
[email protected]及更高版本。
.env ：預設。.env.local ：本地覆蓋。除測試之外的所有環境都會載入此文件。.env.development 、 .env.test 、 .env.production ：特定於環境的設定。.env.development.local 、 .env.test.local 、 .env.production.local ：本地覆蓋特定於環境的設定。左側的文件比右側的文件具有更高的優先順序：
npm start ： .env.development.local 、 .env.development 、 .env.local 、 .envnpm run build ： .env.production.local .local， .env.production ， .env.local ， .envnpm test ： .env.test.local 、 .env.test 、 .env （注意.env.local遺失）如果機器沒有明確設定這些變量，它們將充當預設值。
請參閱 dotenv 文件以了解更多詳細資訊。
注意：如果您正在定義用於開發的環境變量，您的 CI 和/或託管平台很可能也需要定義這些變數。請查閱他們的文件如何執行此操作。例如，請參閱 Travis CI 或 Heroku 的文檔。
.env中擴展環境變量注意：此功能適用於
[email protected]及更高版本。
擴展計算機上已有的變數以在.env檔案中使用（使用 dotenv-expand）。
例如，取得環境變數npm_package_version ：
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
或擴展當前.env檔案的本地變數：
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
許多流行的庫在其文件中使用裝飾器。
Create React App 目前不支援裝飾器語法，因為：
然而，在許多情況下，您可以在沒有裝飾器的情況下重寫基於裝飾器的程式碼也一樣好。
請參考這兩個線程以供參考：
當規範發展到穩定階段時，Create React App 將添加裝飾器支援。
React 沒有規定特定的資料擷取方法，但人們通常使用像 axios 這樣的函式庫或瀏覽器提供的fetch() API。方便的是，Create React App 包含fetch()的填充，因此您可以使用它而不必擔心瀏覽器支援。
全域fetch功能允許輕鬆發出 AJAX 請求。它接受 URL 作為輸入並傳回解析為Response物件的Promise 。您可以在此處找到有關fetch的更多資訊。
該專案還包括一個 Promise polyfill，它提供了 Promises/A+ 的完整實作。 Promise 代表非同步操作的最終結果，您可以在此處和此處找到有關 Promise 的更多資訊。 axios 和fetch()都在底層使用 Promise。也可以使用async / await語法來減少回調嵌套。
您可以在 React 網站上的常見問題解答條目中了解有關從 React 元件發出 AJAX 請求的更多資訊。
這些教程將幫助您將應用程式與在另一個連接埠上運行的 API 後端集成，並使用fetch()存取它。
查看本教學。您可以在此處找到配套的 GitHub 儲存庫。
查看本教學。您可以在此處找到配套的 GitHub 儲存庫。
注意：此功能適用於
[email protected]及更高版本。
人們通常從與後端實現相同的主機和連接埠提供前端 React 應用程式。
例如，部署應用程式後，生產設定可能如下所示：
/ - static server returns index.html with React app
/todos - static server returns index.html with React app
/api/todos - server handles any /api/* requests using the backend implementation
不需要這樣的設定。但是，如果您確實有這樣的設置，那麼編寫像fetch('/api/todos')這樣的請求會很方便，而不必擔心在開發過程中將它們重定向到另一個主機或連接埠。
若要告訴開發伺服器將任何未知請求代理程式到開發中的 API 伺服器，請將proxy欄位新增至package.json ，例如：
"proxy" : "http://localhost:4000" ,這樣，當您在開發中fetch('/api/todos')時，開發伺服器將識別出它不是靜態資產，並將您的請求代理到http://localhost:4000/api/todos作為後備。開發伺服器只會嘗試將其Accept標頭中沒有text/html請求傳送到代理程式。
方便的是，這可以避免開發中的 CORS 問題和錯誤訊息：
Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
請記住， proxy僅在開發中有效（使用npm start ），並且您需要確保像/api/todos這樣的 URL 在生產中指向正確的內容。您不必使用/api前綴。任何沒有text/html接受標頭的無法識別的請求都將被重定向到指定的proxy 。
proxy選項支援 HTTP、HTTPS 和 WebSocket 連線。
如果proxy選項對您來說不夠靈活，您也可以：
當您啟用proxy選項時，您選擇進行一組更嚴格的主機檢查。這是必要的，因為讓後端對遠端主機開放會使您的電腦容易受到 DNS 重新綁定攻擊。這個問題在這篇文章和這個問題中得到了解釋。
在localhost上進行開發時，這不會影響您，但如果您像此處所述那樣進行遠端開發，則啟用proxy選項後，您將在瀏覽器中看到此錯誤：
無效的主機標頭
若要解決此問題，您可以在專案根目錄中名為.env.development的檔案中指定公用開發主機：
HOST=mypublicdevhost.com
如果您現在重新啟動開發伺服器並從指定主機加載應用程序，它應該可以工作。
如果您仍然遇到問題，或者您正在使用雲端編輯器等更奇特的環境，則可以透過向.env.development.local添加一行來完全繞過主機檢查。請注意，這很危險，會讓您的電腦遭受惡意網站的遠端程式碼執行：
# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true
我們不推薦這種方法。
注意：此功能適用於
[email protected]及更高版本。
如果proxy選項對您來說不夠靈活，您可以按以下形式指定一個物件（在package.json中）。
您也可以指定http-proxy-middleware或http-proxy支援的任何設定值。
{
// ...
"proxy" : {
"/api" : {
"target" : "<url>" ,
"ws" : true
// ...
}
}
// ...
}所有符合此路徑的請求都將被代理，無一例外。這包括對text/html的請求，標準proxy選項不會代理這些請求。
如果您需要指定多個代理，可以透過指定其他條目來實現。匹配是正規表示式，因此您可以使用正規表示式來匹配多個路徑。
{
// ...
"proxy" : {
// Matches any request starting with /api
"/api" : {
"target" : "<url_1>" ,
"ws" : true
// ...
} ,
// Matches any request starting with /foo
"/foo" : {
"target" : "<url_2>" ,
"ssl" : true ,
"pathRewrite" : {
"^/foo" : "/foo/beta"
}
// ...
} ,
// Matches /bar/abc.html but not /bar/sub/def.html
"/bar/[^/]*[.]html" : {
"target" : "<url_3>" ,
// ...
} ,
// Matches /baz/abc.html and /baz/sub/def.html
"/baz/.*/.*[.]html" : {
"target" : "<url_4>"
// ...
}
}
// ...
}設定 WebSocket 代理程式時，需要注意一些額外的注意事項。
如果您使用的是 Socket.io 等 WebSocket 引擎，則必須執行一個可用作代理目標的 Socket.io 伺服器。 Socket.io 不適用於標準 WebSocket 伺服器。具體來說，不要期望 Socket.io 能夠與 websocket.org echo 測試一起使用。
有一些很好的文件可用於設定 Socket.io 伺服器。
標準 WebSockets將與標準 WebSocket 伺服器以及 websocket.org echo 測試一起使用。您可以在伺服器中使用 ws 等函式庫，在瀏覽器中使用本機 WebSocket。
無論哪種方式，您都可以在package.json中手動代理 WebSocket 請求：
{
// ...
"proxy" : {
"/socket" : {
// Your compatible WebSocket server
"target" : "ws://<socket_url>" ,
// Tell http-proxy-middleware that this is a WebSocket proxy.
// Also allows you to proxy WebSocket requests without an additional HTTP request
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
"ws" : true
// ...
}
}
// ...
} 注意：此功能適用於
[email protected]及更高版本。
您可能需要開發伺服器透過 HTTPS 提供頁面服務。這可能有用的一種特殊情況是，當 API 伺服器本身提供 HTTPS 服務時，使用「代理」功能將請求代理到 API 伺服器。
為此，請將HTTPS環境變數設為true ，然後像往常一樣使用npm start啟動開發伺服器：
set HTTPS = true && npm start ( $ env: HTTPS = $true ) -and (npm start)（注意：缺少空格是故意的。）
HTTPS=true npm start請注意，伺服器將使用自簽名證書，因此您的網頁瀏覽器幾乎肯定會在訪問該頁面時顯示警告。
<meta>標籤由於 Create React App 不支援伺服器渲染，您可能想知道如何使<meta>標籤動態化並反映當前 URL。為了解決這個問題，我們建議在 HTML 中加入佔位符，如下所示：
<!doctype html >
< html lang =" en " >
< head >
< meta property =" og:title " content =" __OG_TITLE__ " >
< meta property =" og:description " content =" __OG_DESCRIPTION__ " >然後，在伺服器上，無論您使用什麼後端，您都可以將index.html讀入內存，並根據當前 URL 將__OG_TITLE__ 、 __OG_DESCRIPTION__和任何其他佔位符替換為值。只需確保清理並轉義插值，以便它們可以安全地嵌入到 HTML 中！
如果使用Node伺服器，甚至可以在客戶端和伺服器之間共用路由匹配邏輯。然而，在簡單的情況下複製它也可以很好地工作。
如果您使用靜態託管提供者託管您的build ，則可以使用react-snapshot 或react-snap 為應用程式中的每個路由或相對連結產生HTML 頁面。當 JavaScript 套件載入後，這些頁面將無縫地變得活躍或「水合」。
還有機會在靜態託管之外使用此功能，以減輕伺服器在生成和快取路由時的壓力。
預先渲染的主要好處是，無論您的 JavaScript 套件是否成功下載，您都可以透過HTML 有效負載來取得每個頁面的核心內容。它還增加了您的應用程式的每個路徑被搜尋引擎收錄的可能性。
您可以在此處閱讀有關零配置預渲染（也稱為快照）的更多資訊。
與上一節類似，您可以在 HTML 中保留一些佔位符來注入全域變量，例如：
< ! doctype html >
< html lang = "en" >
< head >
< script >
window.SERVER_DATA = __SERVER_DATA__;
</ script >然後，在伺服器上，您可以在發送回應之前將__SERVER_DATA__替換為真實資料的 JSON。然後客戶端程式碼可以讀取window.SERVER_DATA來使用它。確保在將 JSON 發送到客戶端之前對其進行清理，因為這會使您的應用程式容易受到 XSS 攻擊。
注意：此功能適用於
[email protected]及更高版本。
閱讀遷移指南，了解如何在舊專案中啟用它！
Create React App 使用 Jest 作為其測試運行器。為了準備這次集成，我們對 Jest 進行了重大改造，因此如果您幾年前聽說過有關它的壞消息，請再嘗試一次。
Jest 是一個基於 Node 的運行器。這意味著測試始終在 Node 環境中運行，而不是在真實的瀏覽器中運行。這使我們能夠實現快速迭代並防止不穩定。
雖然 Jest 透過 jsdom 提供了瀏覽器全域變數（例如window ，但它們只是真實瀏覽器行為的近似值。 Jest 旨在用於邏輯和元件的單元測試，而不是 DOM 怪癖。
如果需要，我們建議您使用單獨的工具進行瀏覽器端對端測試。它們超出了 Create React App 的範圍。
Jest 將尋找具有以下任何流行命名約定的測試檔案：
__tests__資料夾中帶有.js後綴的檔案。.test.js後綴的檔案。.spec.js後綴的檔案。 .test.js / .spec.js檔案（或__tests__資料夾）可以位於src頂層資料夾下的任意深度。
我們建議將測試檔案（或__tests__資料夾）放在正在測試的程式碼旁邊，以便相對導入顯得更短。例如，如果App.test.js和App.js位於同一資料夾中，則測試只需import App from './App'而不是很長的相對路徑。託管還有助於在大型專案中更快找到測試。
當您執行npm test時，Jest 將以監視模式啟動。每次儲存檔案時，它都會重新執行測試，就像npm start重新編譯程式碼一樣。
觀察程序包括一個互動式命令列介面，能夠運行所有測試或專注於搜尋模式。它的設計方式如此，以便您可以保持開啟並享受快速重新運行。您可以從觀察者每次運行後列印的「觀察使用」註釋中了解命令：
預設情況下，當您執行npm test時，Jest 將僅執行與上次提交後變更的檔案相關的測試。這是一項優化，旨在使您的測試快速運行，無論您有多少測試。但是，它假設您不經常提交未通過測試的程式碼。
Jest 總是會明確提到它只運行與上次提交以來更改的文件相關的測試。您也可以在手錶模式下按a強制 Jest 執行所有測試。
如果專案不在 Git 或 Mercurial 儲存庫中，Jest 將始終在持續整合伺服器上執行所有測試。
若要建立測試，請新增帶有測試名稱及其程式碼的it() （或test() ）區塊。您可以選擇將它們包裝在describe()區塊中以進行邏輯分組，但這既不是必需的，也不建議這樣做。
Jest 提供了一個內建的expect()全域函數來進行斷言。基本測試可能如下所示：
import sum from './sum' ;
it ( 'sums numbers' , ( ) => {
expect ( sum ( 1 , 2 ) ) . toEqual ( 3 ) ;
expect ( sum ( 2 , 2 ) ) . toEqual ( 4 ) ;
} ) ; Jest 支援的所有expect()匹配器均在此詳細記錄。
您也可以使用jest.fn()和expect(fn).toBeCalled()來建立「spies」或模擬函數。
組件測試技術的範圍很廣。它們的範圍從驗證元件渲染是否不會拋出的“冒煙測試”，到淺層渲染和測試某些輸出，再到完整渲染和測試元件生命週期和狀態變更。
不同的項目根據組件更改的頻率以及它們包含的邏輯量來選擇不同的測試權衡。如果您尚未決定測試策略，我們建議您先為元件建立簡單的冒煙測試：
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
const div = document . createElement ( 'div' ) ;
ReactDOM . render ( < App /> , div ) ;
} ) ;此測試安裝一個元件並確保它在渲染過程中不會拋出異常。像這樣的測試只需很少的努力就能提供很多價值，因此它們非常適合作為起點，這就是您將在src/App.test.js中找到的測試。
當您遇到因更改元件而導致的錯誤時，您將更深入地了解其中哪些部分值得在應用程式中進行測試。這可能是引入更具體的測試來斷言特定的預期輸出或行為的好時機。
如果您想獨立於其渲染的子元件來測試元件，我們建議使用 Enzyme 的shallow()渲染 API。要安裝它，請運行：
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer或者你可以使用yarn ：
yarn add enzyme enzyme-adapter-react-16 react-test-renderer從 Enzyme 3 開始，您需要安裝 Enzyme 以及與您所使用的 React 版本相對應的轉接器。 （上面的範例使用 React 16 的適配器。）
還需要在全域設定檔中配置適配器：
src/setupTests.js import { configure } from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
configure ( { adapter : new Adapter ( ) } ) ;注意：請記住，如果您決定在創建
src/setupTests.js之前“彈出”，則生成的package.json檔案將不包含對其的任何引用。請閱讀此處以了解如何在彈出後添加此內容。
現在你可以用它來寫冒煙測試：
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
shallow ( < App /> ) ;
} ) ;與先前使用ReactDOM.render()冒煙測試不同，此測試僅渲染<App>並且不會更深入。例如，即使<App>本身呈現一個拋出異常的<Button> ，測試也會通過。淺層渲染非常適合獨立的單元測試，但您可能仍然想要建立一些完整的渲染測試以確保元件正確整合。 Enzyme 支援使用mount()進行完整渲染，您也可以使用它來測試狀態變更和元件生命週期。
您可以閱讀 Enzyme 文件以了解更多測試技術。 Enzyme 文件使用 Chai 和 Sinon 進行斷言，但您不必使用它們，因為 Jest 為間諜提供了內建的expect()和jest.fn() 。
以下是 Enzyme 文件中的一個範例，該範例斷言特定輸出，並重寫為使用 Jest 匹配器：
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders welcome message' , ( ) => {
const wrapper = shallow ( < App /> ) ;
const welcome = < h2 > Welcome to React </ h2 > ;
// expect(wrapper.contains(welcome)).to.equal(true);
expect ( wrapper . contains ( welcome ) ) . toEqual ( true ) ;
} ) ;所有 Jest 匹配器都在此處進行了詳細記錄。
不過，如果您願意，您可以使用 Chai 等第三方斷言函式庫，如下所述。
此外，您可能會發現 jest-enzyme 通過可讀的匹配器有助於簡化您的測試。上麵contains程式碼可以用 jest-enzyme 寫得更簡單。
expect ( wrapper ) . toContainReact ( welcome )若要啟用此功能，請安裝jest-enzyme ：
npm install --save jest-enzyme或者你可以使用yarn ：
yarn add jest-enzyme將其導入src/setupTests.js中，使其匹配器在每個測試中可用：
import 'jest-enzyme' ; react-testing-library作為enzyme的替代品或伴侶，您可以考慮使用react-testing-library 。 react-testing-library是一個用來測試 React 元件的函式庫，其方式類似於最終使用者使用元件的方式。它非常適合 React 元件和應用程式的單元、整合和端到端測試。它更直接地與 DOM 節點一起工作，因此建議與jest-dom一起使用以改進斷言。
要安裝react-testing-library和jest-dom ，您可以執行：
npm install --save react-testing-library jest-dom或者你可以使用yarn ：
yarn add react-testing-library jest-dom與enzyme類似，您可以建立一個src/setupTests.js檔案以避免測試檔案中出現樣板檔案：
// react-testing-library renders your components to document.body,
// this will ensure they're removed after each test.
import 'react-testing-library/cleanup-after-each' ;
// this adds jest-dom's custom assertions
import 'jest-dom/extend-expect' ;下面是一個使用react-testing-library和jest-dom來測試<App />元件渲染「Welcome to React」的範例。
import React from 'react' ;
import { render } from 'react-testing-library' ;
import App from './App' ;
it ( 'renders welcome message' , ( ) => {
const { getByText } = render ( < App /> ) ;
expect ( getByText ( 'Welcome to React' ) ) . toBeInTheDOM ( ) ;
} ) ;了解有關react-testing-library提供的實用程式的更多信息，以方便測試非同步互動以及從react-testing-library文件和範例中選擇表單元素。
我們建議您使用expect()進行斷言，並使用jest.fn()進行間諜。如果您遇到問題，請針對 Jest 提交這些問題，我們將修復它們。我們打算繼續讓它們更好地支援 React，例如支援漂亮列印的 React 元素作為 JSX。
但是，如果您習慣使用其他程式庫，例如 Chai 和 Sinon，或者您想要移植使用它們的現有程式碼，則可以像這樣正常匯入它們：
import sinon from 'sinon' ;
import { expect } from 'chai' ;然後像平常一樣在測試中使用它們。
注意：此功能適用於
[email protected]及更高版本。
如果您的應用程式使用需要在測試中模擬的瀏覽器 API，或者如果您只需要在執行測試之前進行全域設置，請將src/setupTests.js新增到您的專案中。它將在運行測試之前自動執行。
例如：
src/setupTests.js const localStorageMock = {
getItem : jest . fn ( ) ,
setItem : jest . fn ( ) ,
clear : jest . fn ( )
} ;
global . localStorage = localStorageMock注意：請記住，如果您決定在創建
src/setupTests.js之前“彈出”，則生成的package.json文件將不包含對其的任何引用，因此您應該在 Jest 的配置中手動創建屬性setupTestFrameworkScriptFile，像下面這樣：
"jest" : { // ... "setupTestFrameworkScriptFile" : "<rootDir>/src/setupTests.js" }
您可以將it()替換為xit()以暫時排除測試的執行。
同樣， fit()可讓您專注於特定測試，而無需執行任何其他測試。
Jest 有一個整合的覆蓋率報告器，可以與 ES6 很好地配合，並且不需要配置。
執行npm test -- --coverage （注意中間的額外-- ）以包含如下的覆蓋率報告：
請注意，覆蓋範圍內的測試運行速度要慢得多，因此建議將其與正常工作流程分開運行。
透過將以下任何受支援的鍵新增至 package.json 中的 Jest 配置中，可以覆寫預設的 Jest 覆蓋配置。
支援的覆蓋：
collectCoverageFromcoverageReporterscoverageThresholdsnapshotSerializers範例 package.json：
{
"name" : " your-package " ,
"jest" : {
"collectCoverageFrom" : [
" src/**/*.{js,jsx} " ,
" !<rootDir>/node_modules/ " ,
" !<rootDir>/path/to/dir/ "
],
"coverageThreshold" : {
"global" : {
"branches" : 90 ,
"functions" : 90 ,
"lines" : 90 ,
"statements" : 90
}
},
"coverageReporters" : [ " text " ],
"snapshotSerializers" : [ " my-serializer-module " ]
}
}預設情況下， npm test使用互動式 CLI 執行觀察程式。但是，您可以強制它執行一次測試並透過設定名為CI的環境變數來完成該過程。
當使用npm run build linter 建立應用程式的建置時，預設不會檢查警告。與npm test一樣，您可以透過設定環境變數CI強制建置執行 linter 警告檢查。如果遇到任何警告，則建置失敗。
流行的 CI 伺服器已經預設設定了環境變數CI但你也可以自己做：
.travis.yml檔案新增至您的 git 儲存庫。 language: node_js
node_js:
- 6
cache:
directories:
- node_modules
script:
- npm run build
- npm test
依照本文使用 Create React App 專案設定 CircleCI。
set CI = true && npm test set CI = true && npm run build（注意：缺少空格是故意的。）
( $ env: CI = $true ) -and (npm test)( $ env: CI = $true ) -and (npm run build)CI=true npm test CI=true npm run build測試命令將強制 Jest 執行一次測試，而不是啟動觀察程式。
如果您發現自己在開發中經常這樣做，請提交一個問題來告訴我們您的用例，因為我們希望讓觀察者獲得最佳體驗，並且願意改變它的工作方式以適應更多工作流程。
建置指令將檢查 linter 警告，如果發現任何警告，則會失敗。
預設情況下，產生的項目的package.json如下所示：
"scripts" : {
"start" : "react-scripts start" ,
"build" : "react-scripts build" ,
"test" : "react-scripts test --env=jsdom"如果您知道您的測試都不依賴 jsdom，您可以安全地刪除--env=jsdom ，並且您的測試將運行得更快：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test --env=jsdom"
+ "test": "react-scripts test"為了幫助您做出決定，這裡列出了需要 jsdom的 API：
window和documentReactDOM.render()TestUtils.renderIntoDocument() （上述的捷徑）mount()相反，以下 API不需要 jsdom ：
TestUtils.createRenderer() （淺渲染）shallow()最後，快照測試也不需要jsdom。
快照測試是 Jest 的功能，它會自動生成元件的文字快照並將其保存在磁碟上，因此如果 UI 輸出發生更改，您會收到通知，而無需在元件輸出上手動編寫任何斷言。了解有關快照測試的更多資訊。
如果您使用 Visual Studio Code，則有一個 Jest 擴充功能可以與開箱即用的 Create React App 搭配使用。這在使用文字編輯器時提供了許多類似 IDE 的功能：顯示測試運行的狀態以及內聯的潛在失敗訊息、自動啟動和停止觀察程序以及提供一鍵快照更新。
有多種方法可以為 Jest 測試設定調試器。我們介紹了 Chrome 和 Visual Studio Code 中的偵錯。
注意：調試測試需要 Node 8 或更高版本。
將以下內容新增至專案的package.json中的scripts部分
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand --env=jsdom "
}放置debugger;任何測試和運行中的語句：
$ npm run test:debug這將開始運行您的 Jest 測試，但在執行之前暫停以允許偵錯器附加到進程。
在 Chrome 中開啟以下內容
about:inspect
開啟該連結後，將顯示 Chrome 開發者工具。選擇對進程inspect ，然後在 React 腳本的第一行設定一個斷點（這樣做只是為了讓您有時間開啟開發人員工具並防止 Jest 在您有時間執行之前執行）。點擊螢幕右上角看起來像“播放”按鈕的按鈕以繼續執行。當 Jest 執行包含偵錯器語句的測試時，執行將暫停，您可以檢查目前範圍和呼叫堆疊。
注意：--runInBand cli 選項可確保 Jest 在同一進程中執行測試，而不是為單一測試產生進程。通常，Jest 會跨進程並行測試運行，但很難同時偵錯多個進程。
Visual Studio Code 開箱即用支援偵錯 Jest 測試。
使用以下launch.json設定檔：
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
通常，在應用程式中，您有很多 UI 元件，每個元件都有許多不同的狀態。例如，一個簡單的按鈕組件可能具有以下狀態：
通常，如果不執行範例應用程式或一些範例，就很難看到這些狀態。
預設情況下，Create React App 不包含任何用於此目的的工具，但您可以輕鬆地將 Storybook for React（來源）或 React Styleguidist（來源）新增至您的專案。這些第三方工具可讓您開發元件並獨立於應用程式查看其所有狀態。
您也可以將 Storybook 或風格指南部署為靜態應用程式。這樣，團隊中的每個人都可以查看和查看 UI 元件的不同狀態，而無需啟動後端伺服器或在應用程式中建立帳戶。
Storybook 是 React UI 元件的開發環境。它允許您瀏覽元件庫、查看每個元件的不同狀態以及互動式開發和測試元件。
首先，全域安裝以下 npm 套件：
npm install -g @storybook/cli然後，在應用程式的目錄中執行以下命令：
getstorybook之後，請按照螢幕上的指示進行操作。
了解有關 React 故事書的更多資訊：
Styleguidist 結合了風格指南（所有元件及其道具文件和使用範例都顯示在單一頁面上）以及獨立開發元件的環境（類似於 Storybook）。在 Styleguidist 中，您可以用 Markdown 編寫範例，其中每個程式碼片段都呈現為即時可編輯的遊樂場。
首先，安裝Styleguidist：
npm install --save react-styleguidist或者你可以使用yarn ：
yarn add react-styleguidist然後，將這些腳本加入您的package.json ：
"scripts": {
+ "styleguide": "styleguidist server",
+ "styleguide:build": "styleguidist build",
"start": "react-scripts start",然後，在應用程式的目錄中執行以下命令：
npm run styleguide之後，請按照螢幕上的指示進行操作。
了解有關 React Styleguidist 的更多資訊：
Create React App 不提供任何將元件發佈到 npm 的內建功能。如果您準備好從專案中提取元件以便其他人可以使用它，我們建議將其移至專案外部的單獨目錄，然後使用 nwb 等工具準備發布。
預設情況下，生產版本是一個功能齊全、離線優先的漸進式 Web 應用程式。
漸進式 Web 應用程式比傳統網頁更快、更可靠，並提供引人入勝的行動體驗：
sw-precache-webpack-plugin已整合到生產配置中，它將負責產生一個服務工作執行緒文件，該文件將自動預先快取所有本機資源，並在部署更新時保持它們最新狀態。 Service Worker 將使用快取優先策略來處理對本機資源的所有請求，包括初始 HTML，確保您的 Web 應用程式即使在緩慢或不可靠的網路上也能可靠地快速運行。
如果您不想在初始生產部署之前啟用服務工作人員，請從src/index.js中刪除對registerServiceWorker()呼叫。
如果您先前在生產部署中啟用了 Service Worker，並且決定為所有現有使用者停用它們，則可以先透過修改 Service Worker 匯入來交換對src/index.js中的registerServiceWorker()的呼叫：
import { unregister } from './registerServiceWorker' ;然後呼叫unregister()來代替。當使用者存取具有unregister()的頁面後，Service Worker 將被卸載。請注意，根據/service-worker.js的服務方式，快取可能需要長達 24 小時才能失效。
Service Worker 需要 HTTPS，儘管為了方便本機測試，該策略不適用於localhost 。如果您的生產 Web 伺服器不支援 HTTPS，則 Service Worker 註冊將失敗，但 Web 應用程式的其餘部分將保持功能。
目前並非所有 Web 瀏覽器都支援 Service Worker。在缺乏支援的瀏覽器上不會嘗試註冊 Service Worker。
Service Worker 僅在生產環境中啟用，例如npm run build的輸出。建議您不要在開發環境中啟用離線優先 Service Worker，因為使用先前快取的資源並且不包含您在本機所做的最新變更時，這可能會導致失敗。
如果您需要在本機測試離線優先 Service Worker，請建立應用程式（使用npm run build ）並從建置目錄執行一個簡單的 http 伺服器。執行建置腳本後， create-react-app將提供有關在本機測試生產建置的一種方法的說明，並且部署說明包含使用其他方法的說明。請務必始終使用隱身窗口，以避免瀏覽器快取出現問題。
如果可能，請配置生產環境以在停用 HTTP 快取的情況下為產生的service-worker.js提供服務。如果這是不可能的（例如，GitHub Pages 不允許您更改預設的 10 分鐘 HTTP 快取生命週期），那麼請注意，如果您訪問您的生產站點，然後在service-worker.js過期之前再次訪問，請注意： HTTP 緩存，您將繼續從 Service Worker 取得先前快取的資源。如果您立即需要查看更新的生產部署，執行輪班刷新將暫時停用服務工作執行緒並從網路檢索所有資產。
用戶並不總是熟悉離線優先的網路應用程式。讓使用者知道 Service Worker 何時完成填充快取（顯示「此 Web 應用程式離線工作！」訊息）並讓他們知道 Service Worker 何時取得可用的最新更新可能很有用。內容可用；請刷新。顯示此訊息目前留給開發人員作為練習，但作為起點，您可以利用src/registerServiceWorker.js中包含的邏輯，該邏輯演示了要監聽哪些服務工作線程生命週期事件來檢測每個場景，以及預設情況下，僅將適當的訊息記錄到JavaScript 控制台。
預設情況下，產生的 Service Worker 檔案不會攔截或快取任何跨來源流量，例如從不同網域載入的 HTTP API 請求、映像或嵌入。如果您想要對這些要求使用執行時間快取策略，您可以eject並在webpack.config.prod.js的SWPrecacheWebpackPlugin部分中設定runtimeCaching選項。
預設配置包括位於public/manifest.json Web 應用程式清單，您可以使用特定於您的 Web 應用程式的詳細資訊進行自訂。
當使用者使用 Android 上的 Chrome 或 Firefox 將 Web 應用程式新增至主畫面時， manifest.json中的元資料將決定顯示 Web 應用程式時要使用的圖示、名稱和品牌顏色。 Web 應用程式清單指南提供了有關每個欄位含義以及您的自訂將如何影響使用者體驗的更多上下文。
來源映射資源管理器使用來源映射分析 JavaScript 套件。這可以幫助您了解程式碼膨脹的根源。
若要將 Source Map Explorer 新增至 Create React App 項目，請依照下列步驟操作：
npm install --save source-map-explorer或者你可以使用yarn ：
yarn add source-map-explorer然後在package.json中，將以下行加入scripts ：
"scripts": {
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",然後，要分析捆綁包，請執行生產構建，然後執行分析腳本。
npm run build
npm run analyze
npm run build使用應用程式的生產版本建立一個build目錄。設定您最喜歡的 HTTP 伺服器，以便為您網站的訪客提供index.html ，並且向/static/js/main.<hash>.js等靜態路徑的請求提供/static/js/main.<hash>.js檔。
對於使用 Node 的環境，處理這個問題的最簡單方法是安裝serve並讓它處理其餘的事情：
npm install -g serve
serve -s build上面顯示的最後一個命令將在連接埠5000上為您的靜態網站提供服務。與許多服務的內部設定一樣，可以使用-p或--port標誌來調整連接埠。
運行此命令以獲取可用選項的完整清單：
serve -h您不一定需要靜態伺服器才能在生產中執行 Create React App 專案。它可以很好地整合到現有的動態系統中。
以下是使用 Node 和 Express 的程式設計範例：
const express = require ( 'express' ) ;
const path = require ( 'path' ) ;
const app = express ( ) ;
app . use ( express . static ( path . join ( __dirname , 'build' ) ) ) ;
app . get ( '/' , function ( req , res ) {
res . sendFile ( path . join ( __dirname , 'build' , 'index.html' ) ) ;
} ) ;
app . listen ( 9000 ) ;伺服器軟體的選擇也不重要。由於 Create React App 完全與平台無關，因此無需明確使用 Node.js。
包含靜態資源的build資料夾是 Create React App 產生的唯一輸出。
然而，如果您使用客戶端路由，這還不夠。如果您想在單頁應用程式中支援/todos/42等 URL，請閱讀下一節。
如果您使用在底層使用 HTML5 pushState歷史記錄 API 的路由器（例如，具有browserHistory React Router），許多靜態檔案伺服器將會失敗。例如，如果您使用帶有/todos/42路由的 React Router，開發伺服器將正確回應localhost:3000/todos/42 ，但服務上述生產建置的 Express 則不會。
這是因為當/todos/42出現新頁面載入時，伺服器會尋找檔案build/todos/42但找不到它。伺服器需要配置為透過提供index.html來回應對/todos/42的請求。例如，我們可以修改上面的 Express 範例，為任何未知路徑提供index.html ：
app.use(express.static(path.join(__dirname, 'build')));
- app.get('/', function (req, res) {
+ app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});如果您使用的是 Apache HTTP Server，則需要在public資料夾中建立.htaccess文件，如下所示：
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
當您執行npm run build時，它將複製到build資料夾。
如果您使用 Apache Tomcat，則需要遵循此 Stack Overflow 答案。
現在，對/todos/42請求將在開發和生產中正確處理。
在生產版本中，在支援 Service Worker 的瀏覽器中，Service Worker 將透過提供index.html的快取副本來自動處理所有導覽請求，例如/todos/42 。可以透過eject然後修改SWPreachePlugin配置的navigateFallback和navigateFallbackWhitelist選項來設定或停用此服務工作執行緒導航路由。
當使用者將您的應用程式安裝到其裝置的主螢幕時，預設配置將建立/index.html的捷徑。這可能不適用於希望從/提供應用程式的客戶端路由器。在public/manifest.json編輯 Web 應用程式清單並更改start_url以符合所需的 URL 方案，例如：
"start_url" : "." ,預設情況下，建立 React App 會產生一個構建，假設您的應用程式託管在伺服器根目錄下。
若要覆寫此設置，請在package.json中指定homepage ，例如：
"homepage" : "http://mywebsite.com/relativepath" ,這將使 Create React App 正確推斷要在生成的 HTML 檔案中使用的根路徑。
注意：如果您使用的是react-router@^4 ，則可以在任何<Router>上使用basename屬性來根<Link> 。
更多資訊請點這裡。
例如：
< BrowserRouter basename = "/calendar" />
< Link to = "/today" / > // renders <a href="/calendar/today"> 注意：此功能適用於
[email protected]及更高版本。
如果您不使用 HTML5 pushState歷史記錄 API 或完全不使用用戶端路由，則無需指定為您的應用程式提供服務的 URL。相反，您可以將其放入package.json中：
"homepage" : "." ,這將確保所有資源路徑都相對於index.html 。然後http://mywebsite.com/relative/path您將能夠將您的應用程式從http://mywebsite.com轉移到http://mywebsite.com/relativepath ，甚至不必重新建置它。
請參閱此部落格文章，介紹如何將React應用程式部署到Microsoft Azure。
請參閱此部落格文章或此回購，以取得使用自動部署至Azure應用程式服務的方法。
如果您還沒有執行npm install -g firebase-tools請安裝Firebase CLI。註冊Firebase帳戶並建立新專案。執行firebase login並使用您先前建立的Firebase帳戶登入。
然後從專案的根部執行firebase init指令。您需要選擇託管：設定和部署Firebase託管站點，然後選擇您在上一個步驟中建立的Firebase專案。 build將需要同意y資料database.rules.json
=== Project Setup
First, let ' s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we ' ll just set up a default project.
? What Firebase project do you want to associate as default ? Example app (example-app-fd690)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules ? database.rules.json
✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build ' s output directory.
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!重要的是：您需要在firebase.json檔案中為service-worker.js檔案設定適當的http快取標頭，否則您將無法在第一次部署後看到變更（問題＃2440）。應該在"hosting"密鑰中添加它，就像下一步：
{
"hosting": {
...
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
...
現在，在使用npm run build建立生產建置後，您可以透過執行firebase deploy來部署它。
=== Deploying to ' example-app-fd690 ' ...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for upload...
Uploading: [ ============================== ] 75%✔ hosting: build folder uploaded successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...
✔ Deploy complete !
Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
Hosting URL: https://example-app-fd690.firebaseapp.com有關更多信息，請參見您的JavaScript專案添加Firebase。
注意：此功能適用於
[email protected]及更高版本。
homepage加入package.json下面的步驟很重要！
如果跳過，您的應用程式將無法正確部署。
打開您的homepage package.json
"homepage" : " https://myusername.github.io/my-app " ,或用於GitHub用戶頁面：
"homepage" : " https://myusername.github.io " , Create React App使用homepage欄位來決定建置HTML檔案中的根URL。
gh-pages並將deploy新增至package.json中的scripts現在，每當您執行npm run build時，您都會看到一個備忘單，其中包含有關如何部署到GitHub頁面的說明。
要在https://myusername.github.io/my-app上發布它，請運行：
npm install --save gh-pages或者你可以使用yarn ：
yarn add gh-pages在您的package.json中加入以下腳本。
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", predeploy腳本將在deploy之前自動執行。
如果您要部署到GITHUB使用者頁面而不是專案頁面，則需要進行兩個其他修改：
package.json "scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build", npm run deploy部署網站然後運行：
npm run deploygh-pages最後，確保將GitHub專案設定中的GitHub頁面選項設定為使用gh-pages分支：
您可以透過將CNAME檔案新增至public/資料夾中，以使用GitHub頁面配置自訂網域。
GitHub頁面不支援使用引擎蓋下使用HTML5 pushState歷史API的路由器（例如，使用browserHistory進行React路由器）。這是因為當http://user.github.io/todomvc/todos/42等URL有/todos/42的頁面載入時/todos/42 。如果您想將路由器新增至github頁面上的專案中，這裡有幾個解決方案：
hashHistory以進行此效果，但是URL將更長，更詳細（例如， http://user.github.io/todomvc/#/todos/42?_k=yknaj ://user.github.io/todomvc/#/todos/42?__k=yknaJ） 。閱讀有關React路由器中不同歷史記錄實現的更多資訊。index.html頁面。在部署專案之前，您需要在建置資料夾中新增一個404.html文件，然後將重定向程式碼新增至build資料夾中，並且您需要將處理重定向參數的程式碼新增至index.html 。您可以在本指南中找到對此技術的詳細說明。 如果在部署時，您會得到/dev/tty: No such a device or address或類似錯誤，請嘗試使用：
git remote set-url origin https://<user>:<token>@github.com/<user>/<repo> 。npm run deploy again使用Heroku BuildPack來建立React應用程式。
您可以找到用零配置部署React的說明。
有時npm run build在本地工作，但在通過Heroku部署期間失敗。以下是最常見的情況。
如果您得到這樣的東西：
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
這意味著您需要確保您import檔案或目錄的信函符合您在檔案系統或github上看到的字母。
這很重要，因為Linux（Heroku使用的作業系統）對案例敏感。因此， MyDirectory和mydirectory是兩個不同的目錄，因此，即使專案在本地建立，但在情況下的差異也破壞了Heroku遙控器上的import語句。
如果您從包裝中排除或忽略了必要的文件，您將看到類似錯誤的錯誤：
remote: Could not find a required file.
remote: Name: `index.html`
remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
在這種情況下，請確保文件在適當的信件中存在，並且在您的本地.gitignore或~/.gitignore_global上不忽略。
為Netlify的CDN執行手冊：
npm install netlify-cli -g
netlify deploy選擇build作為部署的路徑。
設定連續交付：
使用此設置，NetLify將在推動GIT或開啟拉動請求時建置和部署：
yarn build作為建置命令，並build為發布目錄Deploy site支援客戶端路由：
為了支援pushState ，請確保使用以下重寫規則建立public/_redirects檔案：
/* /index.html 200
建置專案時，建立React應用程式將將public資料夾內容放入建置輸出中。
現在提供零配置的單一命令部署。 now您可以免費部署您的應用程式。
透過建議的桌面工具或npm install -g now立即安裝now命令列工具。
透過運行npm run build建置來建立應用程式。
透過運行cd build進入建置目錄。
now --name your-project-name 。現在您將在輸出中看到一個。
> Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
建置完成後，將該URL貼到您的瀏覽器中，您會看到已部署的應用程式。
詳細資訊在本文中可用。
請參閱此部落格文章，有關如何將React應用程式部署到Amazon Web Services S3和CloudFront。
如果尚未運行npm install -g surge則安裝電湧CLI。執行surge命令並登入您或建立新帳戶。
當被問及專案路徑時，請確保指定build資料夾，例如：
project path: /path/to/project/build請注意，為了支援使用HTML5 pushState API的路由器，您可能需要在部署到激增之前將index.html重新命名為200.html 。這樣可以確保每個URL都歸還到該檔案。
您可以透過在外殼中或使用.ENV中設定環境變數來調整各種開發和生產設定。
| 多變的 | 發展 | 生產 | 用法 |
|---|---|---|---|
| 瀏覽器 | ✅ | 預設情況下，Create React App 將開啟預設的系統瀏覽器，支援 macOS 上的 Chrome。指定一個瀏覽器來覆寫此行為，或將其設為none以完全停用它。如果您需要自訂瀏覽器的啟動方式，則可以指定節點腳本。傳遞給npm start任何參數也將傳遞給此腳本，並且為您的應用程式提供服務的 url 將是最後一個參數。您的腳本的檔案名稱必須具有.js副檔名。 | |
| 主持人 | ✅ | 預設情況下，開發Web伺服器綁定到localhost 。您可以使用此變數來指定不同的主機。 | |
| 港口 | ✅ | 預設情況下，開發 Web 伺服器將嘗試偵聽連接埠 3000 或提示您嘗試下一個可用連接埠。您可以使用此變數來指定不同的連接埠。 | |
| HTTPS | ✅ | 當設定為true時，Create React App 將以https模式運行開發伺服器。 | |
| PUBLIC_URL | ✅ | Create React應用程式假設您的應用程式是在Serving Web伺服器的根或subpath中託管的，或依照package.json （ homepage ）中指定的子路徑託管。通常，Create React App 會忽略主機名稱。您可以使用此變數強制將資產逐字引用到您提供的 URL（包括主機名稱）。當使用 CDN 託管您的應用程式時，這可能特別有用。 | |
| CI | ？ | ✅ | 當設定為true時，Create React App 將警告視為建置中的失敗。它還使測試跑步者不觀看。大多數CI預設設定此標誌。 |
| React_editor | ✅ | 當應用程式在開發過程中崩潰時，您將看到具有可單擊堆疊追蹤的錯誤疊加層。當你點擊它時，Create React App 會嘗試根據目前正在執行的進程來確定你正在使用的編輯器，並開啟相關的來源檔案。您可以發送拉動請求以偵測您選擇的編輯器。設定此環境變數覆蓋自動偵測。如果您這樣做，請確保您的系統路徑環境變數可變數到編輯器的bin資料夾。您也可以將其設為none以完全停用它。 | |
| chokidar_usepolling | ✅ | 當設定為true時，觀察程式會根據虛擬機器內部的需要以輪詢模式運作。如果npm start未偵測到更改，請使用此選項。 | |
| generate_sourcemap | ✅ | 當設定為false時，不會為生產建置產生來源映射。這解決了一些較小的機器上的OOM問題。 | |
| 節點路徑 | ✅ | ✅ | 與node.js中的NODE_PATH相同，但僅允許相對資料夾。透過設定NODE_PATH=src ，可以方便地模擬monorepo設定。 |
npm start未偵測到更改當您在執行npm start時儲存檔案時，瀏覽器應使用更新的程式碼刷新。
如果這沒有發生，請嘗試以下解決方法之一：
index.js的文件，並且您是透過資料夾名稱引用的，則由於WebPack錯誤，您需要重新啟動觀察者。.env文件，如果不存在，並新增CHOKIDAR_USEPOLLING=true 。這樣可以確保下一次您執行npm start時，觀察者在VM內部使用了投票模式。如果這些解決方案都沒有幫助，請在此線程中發表評論。
npm test在 macOS Sierra 上掛起如果您執行npm test ，並且在列印react-scripts test --env=jsdom到控制台，您的WatchMan安裝可能會出現問題，如Facebook Incrubator/create-react-app-app＃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 。
還報告說，卸載守望者解決了問題。因此，如果沒有其他幫助，請將其從系統中刪除，然後重試。
npm run build退出太早根據報告， npm run build可能會在記憶體有限且無交換空間的機器上失敗，這在雲端環境中很常見。即使有小型項目，此命令也可以將您的系統中的RAM使用增加數百兆位元組，因此，如果您的可用記憶體少於1 GB，則建置可能會失敗以下訊息：
建置失敗了，因為該過程過早退出。這可能意味著系統用光了記憶體或某人在過程中稱為
kill -9人。
如果您完全確定自己沒有終止流程，請考慮在要建置的機器上添加一些交換空間，或在本機建置專案。
npm run build在 Heroku 上失敗這可能是病例敏感檔案名稱的問題。請參閱本節。
如果您使用時刻。這是因為該語言環境文件很大，您可能只需要時刻提供的所有地方的子集。
要在捆綁包中新增特定的時刻。
例如：
import moment from 'moment' ;
import 'moment/locale/fr' ;如果以這種方式匯入多個位置，則可以以後透過呼叫moment.locale()使用LocaLE名稱進行切換：
import moment from 'moment' ;
import 'moment/locale/fr' ;
import 'moment/locale/es' ;
// ...
moment . locale ( 'fr' ) ;這僅適用於先前明確導入的地區。
npm run build無法縮小在發佈到NPM之前，一些第三方軟體包不會將其程式碼編譯為ES5。這通常會在生態系統中引起問題，因為瀏覽器（大多數現代版本除外）或某些工具目前都沒有支援所有ES6功能。我們建議至少在NPM上發布NPM上的程式碼。
package.json中的module欄位提供ES模組入口點。請注意，即使庫提供了ES模組版本，如果它打算支援較舊的瀏覽器，它仍應將其他ES6功能預編到ES5 。分叉包裹並自行發布更正的版本。
如果依賴關係足夠小，請將其複製到您的src/資料夾並將其視為應用程式程式碼。
將來，我們可能會開始自動編譯不相容的第三方模組，但目前不支援它。這種方法也將減慢生產的製作。
彈出可讓您自訂任何內容，但是從那時起，您必須自行維護配置和腳本。如果您有許多類似的項目，這可能會令人生畏。在這種情況下，我們建議您建議訂閱您需要的react-scripts和任何其他軟體包。本文深入研究如何進行深入進行。您可以在此問題中找到更多討論。
如果您有更多應該在此頁面上的“如何”食譜的想法，請告訴我們或做出一些貢獻！
