如何优雅的实现小程序API环境自动切换

引言

大家有没有遇到这种场景，小程序在本地对应的后端地址：

开发版 => DEV

正式版 => PROD

体验版=> TEST

石器时代

So，我们封装了个请求，将后端地址维护在一个配置文件里，并指向它，进入了石器时代

config.js

backGroundA: 'https://a-dev.com/api/v1',
// backGroundA: 'https://a-test.com/api/v1',
// backGroundA: 'https://a-prod.com/api/v1',
backGroundB: 'https://b-dev.com/api/v1',
// backGroundB: 'https://b-test.com/api/v1',
// backGroundB: 'https://b-prod.com/api/v1',
backGroundC: 'https://c-dev.com/api/v1'
// backGroundC: 'https://c-test.com/api/v1'
// backGroundC: 'https://c-prod.com/api/v1'

我们在本地开发的时候，就得把TEST跟PROD的文件注释掉，同理去处理体验版跟正式版。

升级版

但我每次切换环境得注释这么多代码，得多累，随后有了升级版：将配置文件单独抽离到一个文件当中，只管1个配置即可：

env.js

// dev环境
exports.dev = {
  backGroundA: 'https://a-dev.com/api/v1',
  backGroundB: 'https://b-dev.com/api/v1',
  backGroundC: 'https://c-dev.com/api/v1'
}

// TEST
exports.test = {
  backGroundA: 'https://a-test.com/api/v1',
  backGroundB: 'https://b-test.com/api/v1',
  backGroundC: 'https://c-test.com/api/v1'
}

// PROD
exports.prod = {
  backGroundA: 'https://a-prod.com/api/v1',
  backGroundB: 'https://b-prod.com/api/v1',
  backGroundC: 'https://c-prod.com/api/v1'
}

config.js

import envList from './env'

// 环境切换
const env = envList['dev']
// const env = envList['test']
// const env = envList['prod']

第二版代码干净了很多，思路也比较清晰，但人为注释代码的方式，在发版流程上需要非常的谨慎，如果注释错就可能造成严重的线上问题。

补救方案也有，但是成本高：

重新发版：小程序发版审核有一定的周期，且一年三次的紧急发版

回滚版本：得联动后台，一起回滚

一次错误发版就很有可能跟奖金说再见...

最终版本

每次发版都提心吊胆，小程序如果能像web一样有环境变量岂不妙哉

别说，还真有，而且隐蔽，是__wxConfig.envVersion

// 检查环境
function checkEnv() {
  const envMap = {
    develop: 'dev',
    trial: 'test'
  }
  const version = __wxConfig.envVersion;
  return envMap[version] || 'prod'
}
// 环境切换
const version = checkEnv();
const env = envList[version];

大功告成，妈妈再也不用担心我发版切错环境了。