前言
-
一般我们把项目所有的配置放在一个文件中，如下图的
Constants.ts文件
但是每个项目至少有2个环境（开发和生产），于是经常通过注释代码的方式更改配置，这样有点麻烦而且容易遗忘
// export const APP_SERVE_URL = 'http://88.128.19.209:9898/api/'; // 开发
export const APP_SERVE_URL = 'http://172.16.19.137:9020/api/'; // 测试
// export const APP_SERVE_URL = 'https://yanxiaojun617.com/invoice/api/'; // 生产
-
然后就有了如下图这样的优化，但打包时还是会忘记修改
IS_DEBUG变量
接下来我们通过自定义脚本的方式更改配置
实操
-
首先新建两个配置文件
Constants-dev.ts和Constants-prod.ts，如下图，内容就是一个配置开发环境，一个配置生产环境
-
新建脚本文件，如下图，脚本内容就是根据
env参数复制不同的配置文件内容到Constants.ts文件。源码：setup-env.js
测试脚本文件，看看
Constants.ts内容是否改变
node scripts/setup-env.js dev
node scripts/setup-env.js prod
-
测试通过后把调用命名加入到
package.json中，如下图
-
最后使用
npm run调用脚本
-
使用编辑器提供的快捷运行方式更方便，还可以通过快捷键控制：
ctrl+F5运行、ctrl+F2停止
其他
-
再添加一个test环境也很方便，新建一个
Constants-test.ts，添加一条运行命令，如下图
-
原理就是在执行ionic cli命令前先执行一段脚本，这种方式很灵活；若要直接运行
ionic serve起作用，可以在package.json中配置ionic_webpack，如下图，但是process.env.IONIC_ENV值只有dev和prod，添加其他环境就比较麻烦了；此配置参考官网文档
最后
本脚本使用nodejs语法，对于前端开发人员来说nodejs还是很容易上手的，其次还要了解一点npm scripts知识
-
如果你使用Mac并了解Linux的bash命令，那使用系统级别的命令效率是最高的。window不支持bash命令？可以在cmder上运行哦，如下图 setup-env.sh源码
通过这么一个小脚本，举一反三，可以写出更复杂的脚本，如自定义cordova插件经常要写相关脚本，也可以模仿各种cli写出自己业务相关的cli，如代码生成器或开发小工具发布到npm平台
