create-react-app修改配置多環境打包

目錄

        修改配置

多環境配置

package.json demo如下：

測試

使用

參考資料，感謝以下同學：

---

修改配置

1. 可以通過 npm run eject 命令將配置文件暴露出來，然後去修改裏面的webpack配置

2. 安裝 react-app-rewired 包後，在根目錄創建 config-overrides.js 自定義配置，最後修改 package.json 中的 scripts（替換react-scripts爲react-app-rewired）​​

多環境配置

1. 安裝 dotenv-cli 包
2. 根據需求在根目錄創建 .env 文件（注意：只能以 REACT_APP_ 開頭），如創建 .env.development、.env.production，內容如下：

   // .env.development
   REACT_APP_ENV=development
   
   // .env.production
   REACT_APP_ENV=production

    

3. 繼續修改 package.json 中的 scripts 指定環境

package.json demo如下：

"scripts": {
    "start": "react-app-rewired start",
    "build:dev": "dotenv -e .env.development react-app-rewired build",
    "build:pro": "dotenv -e .env.production react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},
"devDependencies": {
    "dotenv-cli": "^2.0.1",
    "react-app-rewired": "^2.1.3"
}

測試

運行開發環境（npm start）、打包測試環境（npm run build:dev）、打包生產環境（npm run build:pro），分別 打印 process.env 如下：

// 1. 開發環境（npm start）
{NODE_ENV: "development", PUBLIC_URL: "", REACT_APP_ENV: "development"}

// 2. 測試環境（npm run build:dev）
{NODE_ENV: "production", PUBLIC_URL: "", REACT_APP_ENV: "development"}

// 3. 生產環境（npm run build:pro）
{NODE_ENV: "production", PUBLIC_URL: "", REACT_APP_ENV: "production"}

使用

1. html中：%REACT_APP_ENV%
2. js/jsx中：可以在 process.env 中訪問

參考資料，感謝以下同學：

1. https://www.jianshu.com/p/f9535acd0462
2. https://www.jianshu.com/p/b24154123852
3. https://www.html.cn/create-react-app/docs/adding-custom-environment-variables/