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完全不用动，只需要给新增的增加一个配置文件即可。