create react app .env 環境變量設置

之前搭建腳手架經常使用cross-env進行環境變量設置。

"scripts": {
    "start": "cross-env REACT_APP_ENV=development node scripts/start.js",
    "build-dev": "cross-env REACT_APP_ENV=test PUBLIC_URL=/webapps/ai-crm-web node scripts/build.js",
    "build-uat": "cross-env REACT_APP_ENV=uat PUBLIC_URL=/webapps/ai-crm-web node scripts/build.js",
    "build": "cross-env REACT_APP_ENV=production PUBLIC_URL=/webapps/ai-crm-web node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  },

沒次都要把相關環境變量寫到scripts裏面感受特別冗長。

env.js

function env() {
  if (process.env.REACT_APP_ENV === 'development') {
    // 本地開發環境
    return {
      ENV: 'development',
      GETEWAY_BASE: 'https:..',
      APIROOT: 'https:..',
      APIVERSION: 'v1.0.0',
      SSO: {
        redirect_url: 'https://...',
        client_id: '',
        client_secret: '',
        authorization: ''
      }
    }
  }else if (process.env.REACT_APP_ENV === 'test') {
    // 線上測試環境
  }else{
    // 生產環境
  }
}
export default env()

雖然有獨立的配置文件處理更多環境參數。可是仍是但願讓代碼更簡介優雅一些。

經過create react app .env 環境變量設置

在查看了create react app 官網文檔後發現官方的環境變量並不能知足咱們的需求。
官方的環境process.env.NODE_ENV 只有 development本地開發 和 production構建生產 兩個環境。而環境的擴展也只是分別對這兩個環境分別擴展，並不能知足咱們在線上發佈多個環境對需求。

npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env

看來經過.env只能加入固定的環境變量。如：

若是我但願本地開發單點登陸後跳轉回來的地址是localhost:3000，線上測試環境跳轉回來的是https://test.abc.com ，生產跳轉回來的是https://www.abc.com 呢？
因而在官方文檔找到了

Windows (cmd.exe)
set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start
Windows (Powershell)
($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)
Linux, macOS (Bash)
REACT_APP_NOT_SECRET_CODE=abcdef npm start

但是這並非我想要的。可是找到了env-cmd來代替以上命令。
最終實現以下：

"scripts": {
    "start": "node scripts/start.js",
    "build-dev": "env-cmd -f .env.dev.ol node scripts/build.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  }

通過這樣調整之前的本地開發和生產發佈的scripts徹底不用動，只須要給新增的增長一個配置文件便可。