ionic環境変数を構成することによって生産とテストを区別する

これまでionic開発Appによるテストでは、生産とテストのインタフェース、token、および鍵などが異なるため、生産とテストの切り替えを行う際に、毎回インタフェースのプレフィックスip(またはドメイン名)、tokenおよび鍵を手動で修正する必要があり、これは非常に面倒であり、生産やテストを発表する際に、ミスが発生しやすい.その後、コンパイルコマンドを自動化して実行できるかどうかについて、パラメータを付けてこれらの変数を自動的に切り替えることができるかどうかを考え、グーグルは以下の案をまとめた.
以下は自分で整理したドキュメントで、表現がはっきりしていない場合は、指摘を歓迎し、共同で勉強を交流します.

げんり

export key=value&&ionic cordova build--prod--releaseでは、Webpack構成で環境変数keyの値valueを取得し、現在コマンドラインで実行されている開発か生産かを区別し、この環境変数で対応する変数値を取得できます.

ステップ

本のディレクトリの下でpackage.json追加

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

tsconfig.json追加構成

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

ルートディレクトリに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('
' + filePath + ' does not exist!'));
  } else {
    return filePath;
  }
}

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

新規ファイルsrc/environments/environment.model.tsは、次のコード

を追加する.

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

新規ファイルsrc/environments/environment.dev.tsは、次のコード

を追加します.

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

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

新規ファイルsrc/environments/environment.tsは、次のコード

を追加する.

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

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

変数が必要な場所で直接導入すればimport{ENV}from'@app/env';ENV.domain, ENV.client_id, ENV.secretはすべて使用できます.

スクリプトコマンドラインで生産とテスト(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を区別して、このように実現することもできますが、1つの痛みがあります.それはprodはcssとjsを圧縮したことがありますが、devは圧縮していません.このようにdevは電源を入れるのが非常に遅いので、テストにも体験が非常に悪いです.そこで、環境変数を設定することで、生産とテストを区別したいと思います.
上のcolorsプラグインは、コンパイラがコンパイル時にこの時点で生産されているかテストされているかを容易にするためのコンパイルパッケージです.