ionic通过配置环境变量区别生产和测试

之前在通过ionic开发App进行测试时，由于生产和测试的接口，token，以及秘钥等都不一样，所以在进行生产和测试切换的时候，每次都需要手动修改接口的前缀ip(或者域名)，token以及秘钥，这样就非常麻烦，而且发布生产或者测试时，极其容易出现失误。后来就想能否通过自动化执行编译命令时，附带参数就能够进行自动切换这些变量，于是谷歌并总结了如下方案。

下面是自己整理的文档，如有表述不太清楚，欢迎指出，共同交流学习。

原理

通过export key=value&&ionic cordova build --prod --release我们可以通过webpack配置获取到环境变量key的值value来区别此刻命令行执行的是开发还是生产，然后通过此环境变量获取对应的变量值。

步骤

1. 根目录下package.json添加

"config": {
  "ionic_webpack": "./config/webpack.config.js"
}

2. tsconfig.json添加配置

"baseUrl": "./src",
"paths": {
  "@app/env": [
    "environments/environment"
  ]
}

3. 在根目录新建config/webpack.config.js文件，并添如下代码

var chalk = require("chalk");
var fs = require('fs');
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
var colors = require('colors');

var Build = process.env.BUILD;

var env = process.env.IONIC_ENV;
var pathConfig = path.resolve(environmentPath('dev'));

if (Build === "production") {  //通过环境变量判断,为production则为生产，如果为非production则为测试
  pathConfig = path.resolve(environmentPath('prod'));
  console.log(colors.yellow("Production:", "Environment variables in file: "+ pathConfig + " using for production build."));
}else {
  console.log(colors.yellow("Test:", "Environment variables in file: "+ pathConfig + " using for test build."));
}

useDefaultConfig[env].resolve.alias = {
  "@app/env": pathConfig
};

if (env !== 'prod' && env !== 'dev') {
  // Default to dev config
  useDefaultConfig[env] = useDefaultConfig.dev;
  useDefaultConfig[env].resolve.alias = {
    "@app/env": path.resolve(environmentPath(env))
  };
}

function environmentPath(env) {
  var filePath = './src/environments/environment' + (env === 'prod' ? '' : '.' + env) + '.ts';
  if (!fs.existsSync(filePath)) {
    console.log(chalk.red('\n' + filePath + ' does not exist!'));
  } else {
    return filePath;
  }
}

module.exports = function () {
  return useDefaultConfig;
};

4. 新建文件src/environments/environment.model.ts，并添加如下代码

export interface Environment {
  domain: string;
  client_id: string;
  secret: string;
}

5. 新建文件src/environments/environment.dev.ts，并添加如下代码

import { Environment } from './environment.model';

export const ENV: Environment = {
  domain: 'value_dev',
  client_id: 'value_dev',
  secret: 'value_dev'
}

6. 新建文件src/environments/environment.ts，并添加如下代码

import { Environment } from './environment.model';

export const ENV: Environment = {
  domain: 'value_production',
  client_id: 'value_production',
  secret: 'value_production'
}

7. 在需要用到变量的地方直接引入即可
   import { ENV } from '@app/env'；
   ENV.domain, ENV.client_id, ENV.secret 都可以使用了。

8. 通过脚本命令行来区别生产和测试(Linux下使用export key=value，window下则使用 set key=value来设置环境变量)
   我设置的是BUILD变量，这个变量可以自己去定义，但是在webpack.config.js中process.env.BUILD的BUILD改为你自定义的变量

根目录下新建production.sh文件并添加命令行

export BUILD=production&&ionic cordova build --prod --release

根目录下新建testing.sh文件并添加命令行

export BUILD=testing&&ionic cordova build --prod --release

Linux下直接执行（window则在可以在git窗口中执行或者将shell文件换成bat文件，并且将export改为set）

./testing.sh

or

./production.sh

PS: 刚开始做的时候是使用 IONIC_ENV的prod和dev来区别的，这样虽然也可以实现，但是存在一个痛点，那就是prod是压缩过css和js的，而dev则是没有压缩，这样dev的就导致开机的时候非常慢，所以给测试也是体验非常不好。于是就想到通过设置环境变量来区别生产和测试。

上面的colors插件是为了方便编译者在编译时看到此时是生产还是测试的编译打包。