前端环境区分

概念

生产环境：用户真正使用的环境

预发环境：数据和线上一样。只有内网可以访问（或者是域名和生产环境不一样或其他看团队怎么定义）

测试环境：开发和测试人员用于数据测试的环境

本地环境：只有开发人员使用的环境

通过URL区分

//
const EnvType = {
  LOCAL: 'local',
  TEST: 'test',
  PRE: 'pre',
  PRODUCTION: 'production',
}


const checkUrlHost = () => {
  const { hostname } = window.location || { hostname: null }
  if (hostname === '生产域名') {
    return EnvType.PRODUCTION
  }
  if (hostname === '预发域名') {
    return EnvType.PRE
  }
  if (hostname === '测试域名') {
    return EnvType.TEST
  }
  if (hostname ==== '本地域名') {
    return EnvType.LOCAL
  }
  return EnvType.PRODUCTION
}

构建时传入不同的全局变量

我们以 create-react-app 为例，使用REACT_APP_SITE_ENV来指定所在的环境。

构建时：

# 本地开发环境
$ REACT_APP_SITE_ENV=local npm run start

# 测试环境
$ REACT_APP_SITE_ENV=test npm run build

# 预发布环境
$ REACT_APP_SITE_ENV=pre npm run build

# 正式环境
$ npm run build # 不传入
$ REACT_APP_SITE_ENV=production npm run build # 或传入production

代码中获取当前环境

const getEnv = () => {
  const { REACT_APP_SITE_ENV } = process.env
  if (REACT_APP_SITE_ENV) {
    for (const key in EnvType) {
      const env = EnvType[key]
      if (env === REACT_APP_SITE_ENV) {
        return REACT_APP_SITE_ENV
      }
    }
  }
  return EnvType.PRODUCTION
}

构建时传入的变量本身只能在node环境的脚本中使用，而我们之所以可以在浏览器环境中使用，是借助了webpack的DefinePlugin这个插件，DefinePlugin 允许在 编译时 将你代码中的变量替换为其他值或表达式。简单来说，它的作用就是文本替换，将值或表达式硬编码到代码中。所以前端项目里的process.env和node里的process.env不是同一个东西，只是为了语义化，我们都写成了process.env。

特别注意: DefinePlugin因为是直接进行的文本替换, 如果想替换字符串, 例如'str', 必须要写成 "'str'"