ionic3搭建开发/测试环境

2018/10/25ionic 标签:0

用IONIC3很久了,但是一直没有看到IONIC3官方的相关文档有写关于开发、测试环境的建立或者设置,由此网上找了一番,小牛试刀终于成功搭建了测试和开发环境了,下面来分享一下相关代码与配置。
首先在src目录下创建一个config目录,建立三个文件,分别是webpack.config.js、environment.prod.ts、environment.dev.ts

webpack.config.js中的代码如下:

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

module.exports = function () {
    useDefaultConfig[process.env.IONIC_ENV].resolve.alias = {
        '@environment': path.resolve(__dirname + '/environment.' + process.env.IONIC_ENV + '.ts'),
    };
    return useDefaultConfig;
};

environment.prod.ts中的代码如下:

export const ENV = {
    env: 'prod' ,
    isDebugMode: false
    apiUrl: 'http://prod.com/'
  };

environment.dev.ts中的代码如下:

export const ENV = {
    env: 'dev',
    isDebugMode: true,
    apiUrl: 'http://dev.com'
  };

在项目根目录中找到package.json在最后加入如下代码

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

顺便再找到tsconfig.json在compilerOptions中输入如下代码:

"baseUrl": "./src",
    "paths": {
        "@environment": ["config/environment.prod"]
    }

这样一来就可以在任何页面使用ENV变量了,使用方法如下:

import { ENV } from '@environment'
console.log(ENV.isDebugMode)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

80 + 5 = ?