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