前言

• 一般我们把项目所有的配置放在一个文件中，如下图的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平台