ionic3-ng4学习见闻--(多环境方案)

搜了很久，很难找到一个详细入微，开箱即用的方案。

于是我 百折不挠的，搞出来一个，也不知道是不是最完美的方案，有什么可以优化的地方可以指出，谢谢。

首先，

1.项目目录下(与src平级)，新增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');

 // NODE_ENV指的是 server的环境，也就是 开发环境还是 测试环境或者生产环境，
 // 用来区分不同的api_url和其他插件的app-id或者一些全局变量
 var env = process.env.NODE_ENV || 'dev';
 // IONIC_ENV指的是 app的打包模式等，例如 --prod 这些，不过暂时我没写，这里只详细写上述的。
 var IONIC_ENV = process.env.IONIC_ENV

 console.log('NODE_ENV:' + env);

 console.log('IONIC_ENV:' + IONIC_ENV);

 useDefaultConfig.dev.resolve.alias = {
   "@env/environment": path.resolve(environmentPath(env))
 };

 function environmentPath(env) {
   var filePath = null;
   env.indexOf('dev') != -1 ?
     filePath = 'src/environments/environment.ts' :
     filePath = 'src/environments/environment.' + env.replace(/^\s+|\s+$/g, "") + '.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;
 };

2.聚焦package.json

a.添加代码:为了让webpack 走我们写的 配置文件

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

b.修改代码:新增命令

 "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",
     "ionic:serve:dev": "set NODE_ENV=dev && ionic-app-scripts serve --dev",
     "ionic:serve:prod": "set NODE_ENV=prod && ionic-app-scripts serve --prod",
     "ionic:serve:test": "set NODE_ENV=test && ionic-app-scripts serve --prod",
     "ionic:serve:poc": "set NODE_ENV=poc && ionic-app-scripts serve --prod"
   },

配置了上述命令，我们就可以用 类似 npm run  ionic:serve:dev 的命令 执行 后面的命令内容(set NODE_ENV=dev && ionic-app-scripts serve --dev)

3.新增environments文件夹，如下，其中dev环境对应的配置文件 默认用 environment.ts

4.environments下面的文件内容：(我只给出了dev的配置文件内容，可以按照dev的写出其他的环境的配置文件，其实就是一个对象)

 // environment.ts
 export const ENV = {
   "mode": "Dev",
   "api_url": "http:/XXXXX:35980/hec4Dev"
 }

5.聚焦到tsconfig.json，新增代码(在compilerOptions下)

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

6.到了这里基本就配置好了，webpack 会根据 你在命令行敲的命令 分别的去 加载不同环境的配置文件，去测试下吧

打开main.ts新增代码，

 import { ENV } from '@env/environment';

 console.log(ENV)

然后在命令行敲 npm run ionic:serve:prod，在浏览器的控制台就可以看到 当前的 env变量，也就是 配置文件中的对象，

切换到 npm run ionic:serve:dev，发现env变了，这样就节省了 每次不同环境重新打包的时候，修改文件的必要。

7.env变量已经拿到了，但是怎么在我们的page里面使用呢？每个页面都引入一遍么？那岂不是很麻烦

我们就用provider 的 方法 引入好了

打开app.moudle.ts

provider中新增  { provide: 'ENV', useValue: ENV },

这样其他的页面都可以引入这个provider，

例如：login.ts中

打开控制台看下

都打印出来了。