之前在通過(guò)ionic開(kāi)發(fā)App進(jìn)行測(cè)試時(shí)该抒，由于生產(chǎn)和測(cè)試的接口，token策严，以及秘鑰等都不一樣穗慕，所以在進(jìn)行生產(chǎn)和測(cè)試切換的時(shí)候，每次都需要手動(dòng)修改接口的前綴ip(或者域名)妻导，token以及秘鑰逛绵，這樣就非常麻煩，而且發(fā)布生產(chǎn)或者測(cè)試時(shí)倔韭，極其容易出現(xiàn)失誤术浪。后來(lái)就想能否通過(guò)自動(dòng)化執(zhí)行編譯命令時(shí)，附帶參數(shù)就能夠進(jìn)行自動(dòng)切換這些變量寿酌，于是谷歌并總結(jié)了如下方案胰苏。
下面是自己整理的文檔，如有表述不太清楚醇疼，歡迎指出硕并，共同交流學(xué)習(xí)。
原理
通過(guò)export key=value&&ionic cordova build --prod --release我們可以通過(guò)webpack配置獲取到環(huán)境變量key的值value來(lái)區(qū)別此刻命令行執(zhí)行的是開(kāi)發(fā)還是生產(chǎn)秧荆，然后通過(guò)此環(huán)境變量獲取對(duì)應(yīng)的變量值倔毙。
步驟
- 根目錄下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") { //通過(guò)環(huán)境變量判斷,為production則為生產(chǎn)乙濒，如果為非production則為測(cè)試
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;
};
- 新建文件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 都可以使用了。通過(guò)腳本命令行來(lái)區(qū)別生產(chǎn)和測(cè)試(Linux下使用export key=value豌蟋，window下則使用 set key=value來(lái)設(shè)置環(huán)境變量)
我設(shè)置的是BUILD變量廊散，這個(gè)變量可以自己去定義，但是在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下直接執(zhí)行（window則在可以在git窗口中執(zhí)行或者將shell文件換成bat文件梧疲，并且將export改為set）
./testing.sh
or
./production.sh
PS: 剛開(kāi)始做的時(shí)候是使用 IONIC_ENV的prod和dev來(lái)區(qū)別的允睹，這樣雖然也可以實(shí)現(xiàn)，但是存在一個(gè)痛點(diǎn)幌氮，那就是prod是壓縮過(guò)css和js的缭受，而dev則是沒(méi)有壓縮，這樣dev的就導(dǎo)致開(kāi)機(jī)的時(shí)候非常慢该互，所以給測(cè)試也是體驗(yàn)非常不好米者。于是就想到通過(guò)設(shè)置環(huán)境變量來(lái)區(qū)別生產(chǎn)和測(cè)試。
上面的colors插件是為了方便編譯者在編譯時(shí)看到此時(shí)是生產(chǎn)還是測(cè)試的編譯打包宇智。
