ionic 优雅的解决开发跨域及后台环境切换
之前主要接触的是Android和J2EE之类的开发,不是一个正统前端狗,所以很多前端的特性和骚操作都没有深入了解过。去年部门开始要我带头入坑ionic2,于是我从一个连JavaScript的Hello World都没写过的人，转型为一个Angualr 2+ionic 2的伪前端狗。由于没人指导，期间踩坑无数，的感觉头发日渐稀少，炎热的夏天，头顶总是有丝丝凉意。所以现在闲了下来（更应该说是顿悟后打鸡血般的兴奋感以及女朋友的支持……），决定把一些遇到的坑写出来。
-1
我是前端入门小白，所以可能这条路是错的，不喜勿喷。
0x00 开始
后面都围绕着Gank.io这个网站提供的API测试。
ionic其实就是一个基于Angular前端项目。所以在前端开发的过程中，必须要解决CORS跨域问题。解决方法主要有两个：
Chrome浏览器中安装Access-Control-Allow-OriginChrome拓展修改后台
Service,允许跨域访问(非常极其以及十分的不安全，但我 TMD 前面两个项目就是这样做的，而且因为项目问题，现在不能随便更改项目配置，只能眼睁睁开着项目裸奔着，这或许是我这辈子最大的败笔吧)使用
ionic CLI代理服务器
为何不用第一种方法？
装完Chrome拓展后，开启拓展后，默认所有网站都允许跨域，这就很不安全了 。
这方法还存在一个坑，就是开启拓展后，上
GayhubStar 一些屌炸天的项目的时候，居然会报错，一两次没注意，以为是梯子不稳了，一直错误，才感觉好像并没有那么简单。经过一番推理，发现就是因为开启了跨域拓展，Gayhub做了保护，拒绝了请求，导致报错
当然，一定要用这方法也不是不行，就要花点心思配置了，一个项目还好，多个项目就麻烦了，而且这拓展有时候还会莫名的失效，需要开关拓展刷新页面才恢复正常，这就很不优雅了。
为何不用第二种方法？
f**k
滚
为何用第三种方法？
因为这合理切符合我们对优雅的追求。
0x01 设置ionic CLI代理服务器
在ionic 2及ionic 3项目根目录中，都有ionic.config.json这个文件，我们就是通过这个配置文件实现的。
实现代理
现在我们要调用API接口http://www.gank.io/api/day/history，获取所有历史记录。我们来拆解下这个URL:
通过API说明页：
这个网站的主
URL是http://gank.io所有接口都是
/api这个路由下的
专业一点的说法就是，这个项目的endpoint是http://www.gank.io/api,path是/api。
说点人话就是，如果我是http://www.gank.io网页中包含的一个ajax请求，当我请求/api/history这个url的时候，浏览器最终会把你的请求地址补全，补全为http://www.gank.io/api/day/history，然后你就可以得到数据了。你要实现这自动补全（瞎称呼的，为了方便理解）URL的功能，必须要以/api开头，当浏览器发现是/api开头的时候，就会自动补全，如果不是，就直接请求你输入的URL了。可以把这理解为规定，没有为什么。
结论：
proxyUrl=>http://gank.io/apipath=>/api
修改ionic.config.json文件:
{ "name": "gank-me", "app_id": "", "type": "ionic-angular", "integrations": {}, "proxies": [
{ "path": "/api", "proxyUrl": "http://gank.io/api"
}
]
}测试
import { Http } from '@angular/http';//***this.http.get("/api/day/history")
.toPromise()
.then(res=>{debugger});结果：
就是成功的返回数据嘛
0x02优雅的切换服务器环境
一个稍微正经点的商业项目，总有至少3个环境情况，开发、测试、生产（正式）环境,即Dev,UAT,Prod。在不同环境下，我们有不一样的配置，如数据库的文件名不同，某些服务用到的key不同………这就需要在各个环境之间进行切换。切换的方式有两种：
在一个
*.ts文件中，定义好URL,Key等信息，测试、打包时，手动切换通过
Webpack脚本，通过参数的方式切换
为何放弃方法一？
放弃主要是误操作概率太高，且难以接入Jenkins自动构建打包。如果没有一个人专门负责打包，且这个人还有自己的一个打包TODO list，很容易想象这样一个场景，经过漫长的打包过程后，安装到手机时，才发现环境错了，这就很僵硬了；当然还有比这更糟糕的，就是在生产环境一顿猛如虎的操作后才发现，丫哟，环境错了！！
方法二？
如果是通过参数传入的方式更改环境，或许会简单准确很多吧，至少在Android开发时，通过多渠道打包的方式打包，没有出现过环境搞错的问题。所以这方法二就显得很正确，很优雅了。那么如何实现呢？
开始
预配置环境参数
创建三个环境对应的ts文件：
environment.dev.tsenvironment.prod.tsenvironment.uat.ts
结构：
. ├── src│ ├── environments│ │ ├── environment.dev.ts│ │ ├── environment.prod.ts│ │ └── environment.uat.ts
以environment.prod.ts为例，内容如下:
export const ENV = { "mode": "Prod", "database": "data.db", "cordova": { "id": "io.ionic.starter", "version": "0.0.1", "ios": { "CodePushServerUrl": "prod", "CodePushDeploymentKey": "1234567890"
}, "android": { "CodePushServerUrl": "prod", "CodePushDeploymentKey": "0987654321"
}
}
}然后在项目根目录中创建文件夹config，里面创建文件webpack.config.js
. ├── 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 env = process.env.NODE_ENV || 'dev';var IONIC_ENV = process.env.IONIC_ENVconsole.log('NODE_ENV:' + env);console.log('IONIC_ENV:' + IONIC_ENV);if (env === 'dev') { if (IONIC_ENV == 'dev') {
useDefaultConfig.dev.resolve.alias = { "@env/environment": path.resolve(environmentPath('dev'))
};
}; if (IONIC_ENV == 'prod') {
useDefaultConfig.prod.resolve.alias = { "@env/environment": path.resolve(environmentPath('dev'))
};
};
}if (env === 'uat') { if (IONIC_ENV == 'dev') {
useDefaultConfig.dev.resolve.alias = { "@env/environment": path.resolve(environmentPath('uat'))
};
}; if (IONIC_ENV == 'prod') {
useDefaultConfig.prod.resolve.alias = { "@env/environment": path.resolve(environmentPath('uat'))
};
};
}if (env === 'prod') { if (IONIC_ENV == 'dev') {
useDefaultConfig.dev.resolve.alias = { "@env/environment": path.resolve(environmentPath('prod'))
};
}; if (IONIC_ENV == 'prod') {
useDefaultConfig.prod.resolve.alias = { "@env/environment": path.resolve(environmentPath('prod'))
};
};
}function environmentPath(env) { var filePath = 'src/environments/environment.' + env + '.ts'; console.log("use env file:" + filePath); if (!fs.existsSync(filePath)) { console.log(chalk.red('\n' + filePath + ' does not exist!'));
} else { return filePath;
}
}module.exports = function () { return useDefaultConfig;
};修改项目的package.json文件，添加：
"config": { "ionic_webpack": "./config/webpack.config.js"}修改tsconfig.json
{ "compilerOptions": { "baseUrl": "./src", "paths": { "@env/environment": [ "environments/environment.prod"
]
}
}
}实现动态切换环境URL
前面我们说了设置ionic CLI代理，这时候当然也要加入，实现一个命令，切换环境及参数，才是我们的目标。下面我们开始实现.
项目根目录创建文件
enviroment.json：
{ "devUrl": "http://localhost:8080/api", "devPath": "/api", "uatUrl": "http://r.example.com/api", "uatPath": "/api", "prodUrl": "http://gank.io/api", "prodPath": "/api"}dev和uat我瞎写的，不要在意，只是为了实现效果而已啦。
然后，我们修改刚刚的
webpack.config.js文件，添加一个方法setProxy()及调用者方法的一句代码，完整的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 env = process.env.NODE_ENV || 'dev';var IONIC_ENV = process.env.IONIC_ENVconsole.log('NODE_ENV:' + env);console.log('IONIC_ENV:' + IONIC_ENV);if (env === 'dev') { if (IONIC_ENV == 'dev') {
useDefaultConfig.dev.resolve.alias = { "@env/environment": path.resolve(environmentPath('dev'))
};
}; if (IONIC_ENV == 'prod') {
useDefaultConfig.prod.resolve.alias = { "@env/environment": path.resolve(environmentPath('dev'))
};
};
}if (env === 'uat') { if (IONIC_ENV == 'dev') {
useDefaultConfig.dev.resolve.alias = { "@env/environment": path.resolve(environmentPath('uat'))
};
}; if (IONIC_ENV == 'prod') {
useDefaultConfig.prod.resolve.alias = { "@env/environment": path.resolve(environmentPath('uat'))
};
};
}if (env === 'prod') { if (IONIC_ENV == 'dev') {
useDefaultConfig.dev.resolve.alias = { "@env/environment": path.resolve(environmentPath('prod'))
};
}; if (IONIC_ENV == 'prod') {
useDefaultConfig.prod.resolve.alias = { "@env/environment": path.resolve(environmentPath('prod'))
};
};
}function environmentPath(env) { var filePath = 'src/environments/environment.' + env + '.ts'; console.log("use env file:" + filePath);
setProxy(env); if (!fs.existsSync(filePath)) { console.log(chalk.red('\n' + filePath + ' does not exist!'));
} else { return filePath;
}
}function setProxy(env) { console.info("Set proxy"); var configJson = require("../enviroment.json");
fs = require('fs'); var path = require('path'); var filePath = path.resolve(__dirname, '../ionic.config.json'); var m = JSON.parse(fs.readFileSync(filePath).toString()); var serverUrl; var urlPath; switch (env) { case "prod":
serverUrl = configJson.prodUrl;
urlPath = configJson.prodPath; break; case "dev":
serverUrl = configJson.devUrl;
serverUrl = configJson.devPath; break; default:
serverUrl = configJson.devUrl;
serverPath = configJson.devPath; break;
}
m.proxies[0].proxyUrl = serverUrl;
m.proxies[0].path = urlPath;
fs.writeFileSync(filePath, JSON.stringify(m));
}module.exports = function () { return useDefaultConfig;
};添加启动Script
现在其实已经完成了配置文件的编写，下面就是解决如何使用的问题，我这里举个不完整例子
修改
package.json添加两个环境,Dev和Prod:{ "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve", "serve:uat": "NODE_ENV=uat ionic serve", "serve:prod": "NODE_ENV=prod ionic serve" } }
2. [例]在`home.ts`中调用配置的参数
```typescript
import { Http } from '@angular/http'; import { ENV } from '@env/environment'
@IonicPage() @Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
constructor(private http: Http) {
}
ionViewDidLoad() {
console.log(ENV.mode); //打印环境
debugger; //加个断点
}
}切换环境并运行
假设需要切换到prod环境，那么终端执行$ npm run serve:prod，如果成功，会自动打开网页
断点
我们看到，参数都在ENV这个对象中。ionic CLI代理就不测了，反正都可以用就对了。
如果要切换uat那就$ npm run serve:uat呗，这些命令都是定义在package.json中scripts里面，大家可以依葫芦画瓢整起来完成
项目
Gank-me
参考allnew_package分支
引用
作者：凌音同学
链接：https://www.jianshu.com/p/3cd77cd8d2d5
随时随地看视频
