Create React App文檔說明（二）

絕對路徑導入

可以對工程做一些配置使其支持 絕對路徑 導入，其結果跟在 webpack 中配置路徑別名效果相同

具體配置如下：

2. 在工程下創建 jsconfig.json 文件（若是基於 TypeScript 開發，則是 tsconfig.json）

3. 在 jsconfig.json 中添加基路徑配置

   {
     "compilerOptions": {
       "baseUrl": "src"
     },
     "include": ["src"]
   }
   

現在已經配置了絕對路徑導入，可以像下面這樣導入一個模塊，該模塊位於 src/components/Button.js

import Button from 'components/Button';

使用全局變量

當在 HTML 文件中包含一段 script 腳本，並對外暴露一些全局變量時，如果我們在組件中使用了這些變量，那麼 eslint 會報出變量未定義的警告⚠️

這種情況可以從 window 對象下去獲取這些變量來解決代碼檢查報錯問題

另一種方案就是直接忽略掉這個錯誤 // eslint-disable-line

添加TypeScript

該特性在 [email protected] 及更高版本下可用

當創建一個基於 TypeScript 的 Create React App 工程時

npx create-react-app my-app --typescript

# or

yarn create react-app my-app --typescript

當往已有工程中添加 TypeScript 支持時

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest 

接下來將 js or jsx 文件後綴改爲 ts or tsx （比如 src/index.js to src/index.tsx），然後重啓服務

截止到 4/30/2019 ，enums 和 namespaces 還不支持使用

添加自定義環境變量

該特性在 [email protected] 及更高版本下可用

在項目中可以使用提前定義好的環境變量，就像它們是在本地 JS 文件中聲明的一樣。默認情況下，可以使用 NODE_ENV 這個變量，以及以 REACT_APP_ 開頭的任何其他環境變量。

不要在 React App 下存儲祕鑰信息（比如私有API keys）

環境變量在構建期間嵌入進去

創建自定義變量必須以 REACT_APP_ 開頭，爲了防止意外暴露私有信息，除了 NODE_ENV 環境變量外，其他任何變量都將被忽略。

在服務運行期間，改變了任何環境變量的值都需要重啓才能生效

我們所定義的這些環境變量都會掛載在 process.env 命名空間下。比如有一個名爲 REACT_APP_NOT_SECRET_CODE 的環境變量，需要通過 process.env.REACT_APP_NOT_SECRET_CODE 這種方式在 JS 中使用

NODE_ENV_ 是一個特殊的內置環境變量，可以通過 process.env.NODE_ENV 來讀取它。

2. 當運行 npm run start 時，該變量的值爲 development

3. 當運行 npm run test 時，該變量的值爲 test

4. 當運行 npm run build 時，該變量的值爲 production

爲了防止意外情況的發生，比如將開發環境下構建的代碼部署到生產環境，因此不能手動覆蓋 NODE_ENV 的值

使用場景：

2. render() {
     return (
       
         You are running this application in {process.env.NODE_ENV} mode.
         
            // 不同的環境讀取不同的環境變量值
         
       
     );
   }
   

3. if (process.env.NODE_ENV !== 'production') {
     analytics.disable();
   }
   

配置環境變量

2. 在 shell 命令中配置

3. 在 .env 文件中配置

在HTML中使用環境變量

該特性在 [email protected] 及更高版本中可用

%REACT_APP_WEBSITE_NAME%

• 除了一些內置變量（NODE_ENV和PUBLIC_URL）之外，變量名必須以 REACT_APP_ 開頭使用。
• 環境變量在構建時注入

在 shell 命令中添加臨時變量

Windows（cmd.exe）

set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start

其中引號裏面的內容不能包含空格

Windows（Powershell.exe）

($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)

Linux, maxOS（Bash）

REACT_APP_NOT_SECRET_CODE=abcdef npm start

在 .env 文件中配置環境變量

該特性在 [email protected] 及更高版本中可用

在項目根目錄下創建 .env 文件，定義一個不會改變值的環境變量如下：

REACT_APP_NOT_SECRET_CODE=abcdef

在改變 .env 文件後，需要重啓服務

.env 文件應當包含進源碼管理工具中（.env*.local* 也是如此）

.env還可以使用哪些其他文件？

該特性在 [email protected] 及更高版本中可用

• .env: 默認文件
• .env.local: 所有環境下都會加載除了 test
• .env.development, .env.test, .env.production: 根據當前環境選擇性加載
• .env.development.local, .env.test.local, .env.production.local: 本地環境配置覆蓋特定的環境配置

優先級順序：左邊的優先級大於右邊的

• npm start: .env.development.local, .env.development, .env.local, .env
• npm run build: .env.production.local, .env.production, .env.local, .env
• npm test: .env.test.local, .env.test, .env (note .env.local is missing)