react chat
1.0.0
這個專案是透過 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提供了JSDON的瀏覽器Globals，例如window ，但它們只是真正的瀏覽器行為的近似值。開玩笑旨在用於您的邏輯和組件的單位測試，而不是DOM Quirks。
我們建議您使用單獨的工具進行瀏覽器端對端測試。它們超出了創建React應用程式的範圍。
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儲存庫中。
若要建立測試，請新增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()來創建「間諜」或模擬功能。
組件測試技術有廣泛的範圍。它們的範圍從“煙霧測試”驗證，驗證組件是否不投擲，淺渲染和測試某些輸出，到完整的渲染和測試組件生命週期和狀態變化。
不同的項目根據組件變化的頻率以及所包含多少邏輯選擇不同的測試權衡。如果您尚未決定測試策略，我們建議您從為您的組件建立簡單的煙霧測試開始：
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中找到的測試。
當您遇到由變更的元件引起的錯誤時，您將獲得更深入的了解，其中哪些部分值得在應用程式中進行測試。這可能是引入更具體測試的好時機，主張特定的預期產出或行為。
如果您想與它們渲染的兒童組件隔離測試組件，我們建議使用shallow()呈現API的API。要安裝它，請運行：
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer或者，您可以使用yarn ：
yarn add enzyme enzyme-adapter-react-16 react-test-renderer在酵素3中，您將需要安裝酵素以及與您使用的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> ，此測試也會通過。淺渲染非常適合隔離的單元測試，但是您可能仍需要建立一些完整的渲染測試以確保元件正確整合。酵素支援使用mount()完全渲染，您也可以將其用於測試狀態變化和組件生命週期。
您可以閱讀酶文件以獲取更多測試技術。酵素文件使用Chai和Sinon進行斷言，但您不必使用它們，因為JEST為SPIE提供了內建的expect()和jest.fn() 。
這是酶文檔中的一個示例，該酶斷言特定的輸出，重寫以使用開玩笑的匹配器：
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 ) ;
} ) ;所有的玩笑匹配者都在此處進行了廣泛的記錄。
但是，如果您願意，您可以使用像Chai這樣的第三方斷言庫，如下所述。
此外，您可能會發現開玩笑的酶有助於使用可讀的匹配器簡化測試。以上contains程式碼可以用開玩笑的酵素編寫。
expect ( wrapper ) . toContainReact ( welcome )要啟用此功能，請安裝jest-enzyme ：
npm install --save jest-enzyme或者，您可以使用yarn ：
yarn add jest-enzyme在src/setupTests.js中導入它，以使其匹配器在每個測試中可用：
import 'jest-enzyme' ;我們建議您將expect()用於主張，而jest.fn()用於間諜。如果您對它們有問題，請針對Jest提出這些問題，我們將修復它們。我們打算繼續使它們更好地進行反應，例如支援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之前「彈出」setupTestFrameworkScriptFile則結果package.json。
"jest" : { // ... "setupTestFrameworkScriptFile" : "<rootDir>/src/setupTests.js" }
您可以將it()替換為xit()以暫時將測試排除在執行中。
同樣， fit()可讓您專注於特定的測試，而無需進行任何其他測試。
Jest具有一個整合的覆蓋記者，可與ES6配合使用，不需要配置。
運行npm test -- --coverage （在中間注意額外--額外），以包括這樣的覆蓋範圍報告：
請注意，測試的覆蓋範圍較慢，因此建議將其與普通工作流程分開運行。
可以透過將以下任何支援的金鑰新增至軟體包中的jest config。
支持的替代：
collectCoverageFromcoverageReporterscoverageThresholdsnapshotSerializers範例軟體包。
{
"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將使用Interactive CLI運行觀察者。但是，您可以強迫它執行一次測試，並透過設定稱為CI環境變數來完成該過程。
預設情況下，使用npm run build Linter警告建立應用程式的建置時。像npm test一樣，您可以透過設定環境變數CI強迫建置來執行襯裡警告檢查。如果遇到任何警告，則建置失敗。
流行的CI伺服器預設已經設定了環境變數CI但是您也可以自己執行此操作：
.travis.yml檔案加入您的git儲存庫。 language: node_js
node_js:
- 6
cache:
directories:
- node_modules
script:
- npm run build
- npm test
請依照本文使用Create React App Project設定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測試命令將迫使玩笑一次進行測試，而不是啟動觀察者。
如果您發現自己經常在開發中進行此操作，請提出一個問題來告訴我們您的用例，因為我們希望使Watcher獲得最佳體驗，並願意更改其工作方式以適應更多的工作流程。
建置命令將檢查是否有襯裡警告，如果發現有任何警告，則會失敗。
預設情況下，產生項目的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和document等任何瀏覽器全球範圍ReactDOM.render()TestUtils.renderIntoDocument() （上述快捷方式）mount()相比之下，以下API不需要JSDOM ：
TestUtils.createRenderer() （淺渲染）shallow()最後，快照測試也不需要JSDOM。
快照測試是Jest的功能，它會自動產生元件的文字快照並將其保存在磁碟上，因此，如果UI輸出更改，則不會在元件輸出上手動編寫任何斷言而通知您。閱讀有關快照測試的更多資訊。
如果您使用Visual Studio程式碼，則有一個開玩笑的副檔名，可與Create Apple一起使用。使用文字編輯器時，這提供了許多類似IDE的功能：顯示潛在的失敗訊息內聯的測試狀態，自動啟動和停止觀察者，並提供一鍵式快照更新。
有多種方法可以為您的玩笑測試設定調試器。我們涵蓋Chrome和Visual Studio程式碼中的調試。
注意：調試測試需要節點8或更高。
將以下內容新增至您專案package.json中的scripts部分。
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand --env=jsdom "
}位置debugger;任何測試和運行中的語句：
$ npm run test:debug這將開始進行開玩笑的測試，但在執行之前暫停，以允許偵錯器附加到該過程。
在Chrome中開啟以下內容
about:inspect
開啟該連結後，將顯示Chrome開發人員工具。選擇您的流程中的inspect ，將在React腳本的第一行中設定斷點（這只是為了讓您有時間打開開發人員工具並防止JEST在您有時間之前執行）。點選螢幕右上方的「播放」按鈕的按鈕繼續執行。當Jest執行包含Debugger語句的測試時，執行將暫停，您可以檢查目前範圍並呼叫堆疊。
注意： - runinband CLI選項可確保在同一過程中開玩笑地運行測試，而不是為單一測試產卵過程。通常，開玩笑平行於測試跨過程運行，但很難同時調試許多過程。
開箱即用的開箱即用調試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元件，每個UI元件都有許多不同的狀態。例如，一個簡單的按鈕組件可能具有以下狀態：
通常，很難看到這些狀態而不運行範例應用程式或一些範例。
Create React App預設不包含任何工具，但您可以輕鬆地將故事書新增至React（Source）或React Styleguidist（來源）。這些是第三方工具，可讓您開發元件，並與您的應用程式孤立地看到其所有狀態。
您也可以將故事書或樣式指南部署為靜態應用。這樣，團隊中的每個人都可以在不啟動後端伺服器或在應用程式中建立帳戶的情況下查看和查看UI元件的不同狀態。
Storybook是React UI元件的開發環境。它允許您瀏覽元件庫，查看每個元件的不同狀態，並進行互動開發和測試元件。
首先，全球安裝以下NPM軟體包：
npm install -g @storybook/cli然後，在應用程式目錄中執行以下命令：
getstorybook之後，請按照螢幕上的指示進行操作。
了解有關React Storybook的更多資訊：
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 Stylegidist的更多資訊：
Create React應用程式沒有提供任何內建功能，可以將元件發佈到NPM。如果您準備好從專案中提取組件，以便其他人可以使用它，我們建議將其移至專案外的單獨目錄，然後使用NWB之類的工具來準備出版。
預設情況下，生產建置是一個功能齊全的離線漸進式網路應用程式。
漸進的網路應用程式比傳統網頁更快，更可靠，並提供引人入勝的行動體驗：
sw-precache-webpack-plugin已整合到生產配置中，它將負責產生一個服務工作者文件，該文件將自動佔地所有本地資產，並在部署更新時保持最新狀態。服務工作者將使用快取優先的策略來處理所有本地資產的請求，包括初始HTML，以確保您的網路應用程式快速快速，即使在緩慢或不可靠的網路上也是如此。
如果您希望在初始生產部署之前不啟用服務工作人員，請從src/index.js刪除registerServiceWorker()的呼叫。
如果您以前曾在生產部署中啟用了服務人員，並決定您希望為所有現有用戶停用它們，則可以先透過修改服務服務工作者匯入的src/index.js中的registerServiceWorker() :
import { unregister } from './registerServiceWorker' ;然後致電unregister() 。用戶造訪一個unregister()的頁面後，服務工作者將被卸載。請注意，根據如何提供如何/service-worker.js ，可能需要24小時才能使快取無效。
服務工作人員需要HTTP，儘管為了促進本地測試，但該政策不適用於localhost 。如果您的生產 Web 伺服器不支援 HTTPS，則 Service Worker 註冊將失敗，但 Web 應用程式的其餘部分將保持功能。
目前，所有網頁瀏覽器中尚未支援服務工作人員。服務工作者註冊不會嘗試缺乏支援的瀏覽器。
服務工作者僅在生產環境中啟用，例如npm run build的輸出。建議您不要在開發環境中啟用離線優先 Service Worker，因為使用先前快取的資源並且不包含您在本機所做的最新變更時，這可能會導致失敗。
如果您需要在本機上測試您的離線優先服務工作者，請建立應用程式（使用npm run build ），然後從建置目錄執行簡單的HTTP伺服器。執行建置腳本後， create-react-app將提供一種指令，以一種在本機測試生產建置的方法，並且部署說明具有使用其他方法的說明。請務必始終使用隱身窗口，以避免瀏覽器快取出現問題。
如果可能的話，將生產環境配置為使用HTTP快取服務的產生的service-worker.js服務。如果不可能 - 例如，github頁面不允許您更改預設的10分鐘HTTP快取壽命 - 然後請注意，如果您訪問生產站點，然後在service-worker.js從您的生產站點重新訪問HTTP緩存，您將繼續從服務工作者那裡獲得以前的快取資產。如果您立即需要查看更新的生產部署，執行換檔措施將暫時停用服務工作者並從網路中擷取所有資產。
用戶並不總是熟悉離線優先的網路應用程式。讓使用者知道 Service Worker 何時完成填充快取（顯示「此 Web 應用程式離線工作！」訊息）並讓他們知道 Service Worker 何時取得可用的最新更新可能很有用。新內容；請刷新」。訊息）。目前，顯示此訊息是向開發人員練習的，但是作為起點，您可以使用src/registerServiceWorker.js中包含的邏輯，該邏輯演示了哪些服務工作者的生命週期事件來聆聽以檢測每種情況，並且預設情況下，只需將適當的訊息記錄到JavaScript控制台即可。
預設情況下，產生的服務工作者檔案將不會攔截或快取任何交叉原始流量，例如HTTP API請求，圖像或從其他網域載入的嵌入。如果您想要為這些要求使用執行時間快取策略，則可以eject ，然後在webpack.config.prod.js的SWPrecacheWebpackPlugin部分中設定runtimeCaching選項。
預設配置包括位於public/manifest.json上的網頁應用程式清單，您可以使用特定於網頁應用程式的詳細資訊進行自訂。
當使用者使用Chrome或Firefox上的Android上的Chrome或Firefox將Web應用程式新增至HOMESCREEN時， manifest.json中的元資料。 Web 應用程式清單指南提供了有關每個欄位含義以及您的自訂將如何影響使用者體驗的更多上下文。
來源地圖Explorer使用來源地圖分析JavaScript捆綁包。這可以幫助您了解程式碼膨脹的來源。
若要將來源地圖Explorer新增至建立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伺服器，以便為您的/static/js/main.<hash>.js
對於使用節點的環境，處理此操作的最簡單方法是安裝服務並讓其處理其餘部分：
npm install -g serve
serve -s build上面顯示的最後一個命令將在連接埠5000上為您的靜態網站提供服務。像服務的許多內部設定一樣，可以使用-p或--port標誌調整連接埠。
運行此命令以獲取可用選項的完整清單：
serve -h您不一定需要靜態伺服器來在生產中執行建立React App專案。它的工作原理同樣可以整合到現有動力學中。
這是使用節點和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完全是平台 - 不可思議的，因此無需明確使用節點。
帶有靜態資產的build資料夾是Create React應用程式產生的唯一輸出。
但是，如果您使用客戶端路由，這還不夠。如果您想在單頁應用程式中支援/todos/42之類的URL，請閱讀下一節。
如果您使用在引擎蓋下使用HTML5 pushState歷史記錄API的路由器（例如，具有browserHistory React路由器），許多靜態檔案伺服器將會失敗。例如，如果您使用/todos/42路由的React路由器，則開發伺服器將適當地回應localhost:3000/todos/42 ，但是如上所述的Express為生產建置服務不會。
這是因為當A /todos/42有一個新的頁面載入時，伺服器會尋找檔案build/todos/42 ，但找不到它。需要配置伺服器，以透過服務index.html回應/todos/42的請求。例如，我們可以修改上面的明確範例，以服務任何未知路徑： 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伺服器，則需要在看起來像這樣的public資料夾中建立.htaccess檔案：
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
運行npm run build時，它將複製到build資料夾。
如果您使用的是Apache Tomcat，則需要按照此堆疊溢位答案。
現在，對/todos/42的請求將在開發和生產中正確處理。
在生產建置以及支援服務工作人員的瀏覽器中，服務工作者將透過服務您的index.html的快取副本來自動處理所有導覽請求，例如/todos/42 。可以透過eject來設定或停用此服務工作者導覽路由，然後修改SWPreachePlugin配置的navigateFallback和navigateFallbackWhitelist選項。
當使用者將您的應用程式安裝到其裝置的房屋螢幕上時，預設配置將成為/index.html的捷徑。這可能不適用於客戶端路由器，這些路由器希望該應用程式從/提供。在public/manifest.json上編輯Web應用程式清單，然後更改start_url以符合所需的URL方案，例如：
"start_url" : "." ,預設情況下，Create React App會產生一個構建，假設您的應用程式託管在伺服器根部。
若要覆寫此問題，請在package.json中指定homepage 。
"homepage" : "http://mywebsite.com/relativepath" ,這將使建立React應用程式正確地推斷出在產生的HTML檔案中使用的根路徑。
注意：如果您使用的是react-router@^4 ，則可以使用任何<Router>上的basename Prop root <Link> s root <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 。您可以在本指南中找到對此技術的詳細說明。使用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 。您現在將在輸出中看到一個.sh url：
> 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應用程式將以https模式運行開發伺服器。 | |
| public_url | ✅ | Create React應用程式假設您的應用程式是在Serving Web伺服器的根或subpath中託管的，或依照package.json （ homepage ）中指定的子路徑託管。通常，建立React應用程式會忽略主機名稱。您可以使用此變數迫使資產逐字引用到您提供的URL（包括主機名稱）。當使用CDN託管您的應用程式時，這可能特別有用。 | |
| CI | ？ | ✅ | 設定為true時，Create App將警告視為建置中的故障。它還使測試跑步者不觀看。大多數CI預設設定此標誌。 |
| React_editor | ✅ | 當應用程式崩潰時，您將看到具有單擊堆疊追蹤的錯誤覆蓋層。當您單擊它時，Create React應用程式將嘗試根據當前運行過程確定您使用的編輯器，並開啟相關的來源檔案。您可以發送拉動請求以偵測您選擇的編輯器。設定此環境變數覆蓋自動偵測。 If you do it, make sure your systems PATH environment variable points to your editor's bin folder. You can also set it to none to disable it completely. | |
| CHOKIDAR_USEPOLLING | ✅ | When set to true , the watcher runs in polling mode, as necessary inside a VM. Use this option if npm start isn't detecting changes. | |
| GENERATE_SOURCEMAP | ✅ | When set to false , source maps are not generated for a production build. This solves OOM issues on some smaller machines. | |
| NODE_PATH | ✅ | ✅ | Same as NODE_PATH in Node.js, but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting NODE_PATH=src . |
npm start doesn't detect changes When you save a file while npm start is running, the browser should refresh with the updated code.
If this doesn't happen, try one of the following workarounds:
index.js and you're referencing it by the folder name, you need to restart the watcher due to a Webpack bug..env file in your project directory if it doesn't exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start , the watcher uses the polling mode, as necessary inside a VM.If none of these solutions help please leave a comment in this thread.
npm test hangs on macOS Sierra If you run npm test and the console gets stuck after printing react-scripts test --env=jsdom to the console there might be a problem with your Watchman installation as described in facebookincubator/create-react-app#713.
We recommend deleting node_modules in your project and running npm install (or yarn if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:
It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use Homebrew, you can run these commands to update it:
watchman shutdown-server
brew update
brew reinstall watchman
You can find other installation methods on the Watchman documentation page.
If this still doesn't help, try running launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist .
There are also reports that uninstalling Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
npm run build exits too early It is reported that npm run build can fail on machines with limited memory and no swap space, which is common in cloud environments.即使對於小型項目，此命令也會使系統中的 RAM 使用量增加數百兆位元組，因此，如果您的可用記憶體少於 1 GB，您的建置可能會失敗並顯示以下訊息：
建置失敗，因為進程退出得太早。 This probably means the system ran out of memory or someone called
kill -9on the process.
如果您完全確定沒有終止該進程，請考慮在您正在建置的電腦上新增一些交換空間，或在本機建置專案。
npm run build fails on Heroku這可能是區分大小寫的檔案名稱的問題。 Please refer to this section.
If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.
要將特定的 Moment.js 語言環境新增到您的套件中，您需要明確匯入它。
例如：
import moment from 'moment' ;
import 'moment/locale/fr' ; If import multiple locales this way, you can later switch between them by calling moment.locale() with the locale name:
import moment from 'moment' ;
import 'moment/locale/fr' ;
import 'moment/locale/es' ;
// ...
moment . locale ( 'fr' ) ;這僅適用於先前已明確匯入的區域設定。
npm run build fails to minify一些第三方套件在發佈到 npm 之前不會將其程式碼編譯為 ES5。這通常會導致生態系統出現問題，因為瀏覽器（大多數現代版本除外）和某些工具目前都不支援所有 ES6 功能。我們建議至少在幾年內以 ES5 的形式在 npm 上發布程式碼。
module field in package.json .請注意，即使一個庫提供了 ES Modules 版本，如果它打算支援舊版瀏覽器，它仍然應該將其他 ES6 功能預先編譯為 ES5 。分叉該包並自行發布更正的版本。
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
將來我們可能會開始自動編譯不相容的第三方模組，但目前還不支援。這種方法也會減慢生產建置速度。
彈出允許您自訂任何內容，但從那時起您必須自行維護配置和腳本。如果您有許多類似的項目，這可能會令人望而生畏。 In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need.本文將深入探討如何做到這一點。 You can find more discussion in this issue.
如果您對本頁上應包含的更多「如何做」食譜有任何想法，請告訴我們或貢獻一些！
