用开发者工具控制开发环境和生产环境
发布于 5 年前 作者 ihao 612 次浏览 来自 分享

最近开发过程中遇到一个尴尬的情况,发版前调试一下,API地址改到了测试环境,改完OK发版。。。结果尴尬了,测试地址忘了改回来。审核等待前功尽弃。。。。

这种事情对于匆匆忙忙写bug,匆匆忙忙发版的程序猿来说肯定会发生第二次,第三次。遇到问题,解决问题。

开始翻看找小程序的api文档,于是找到了

wx.getSystemInfo

但是这个API只能区分是pc还是移动端并没有其他有用的信息

接下来去开发社区

https://developers.weixin.qq.com/community/develop/article/doc/000ec87cdd8070c3ba89fe00051813

突然看到这篇文章很有道理,虽然是想直接把作者的方法拿来用,但是想到要在运行时环境通过一个try cath判断控制变量心里有点发虚,再想想。

不过作者提到了灵感来自于node,那是不是可以直接写一个node脚本进行预编译呢。想想小程序的开发者工具还是很open的,兴许可以呢。毕竟还提供了命令行调用,可以考虑一下从这里入手(这太麻烦了。。。。)

https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html

又玩弄了一番开发者工具,终于发现了一个有趣的功能,开发者工具竟然提供了自定义处理命令(编译前的钩子)

在执行相应的操作前钩子可以执行shell命令,那不是说预览和上传之前都可以调用node脚本了吗。

流程 :预览,上传前》执行调用node脚本命令,带上环境参数》node脚本运行 获取命令行参数》根据参数生成不同环境中使用的配置代码》重新写入api配置文件》预览,上传

api.template.js

用作config文件模板,需要根据开发环境动态生成的变量可以用占位符的形式写在里面

var WxApiRoot = '%%API_URL%%';
module.exports=WxApiRoot;

env.config.js

用于配置不同开发环境的配置文件

const envConfig = {
  DEV: {
    API_URL: 'https://dev.com',
  },
  PROD: {
    API_URL: 'https://pro.com',
  },
};
module.exports = envConfig;

接下来是node脚本的入口文件:

首先在项目根目录安装:

cnpm install node-notifier --save-dev

选择安装,目的是为了编译之后提醒开发者配置文件预编译结果

脚本内容:

const fs = require('fs');
const exec = require('child_process').exec;
const envConfig = require('./config/env.config');
const _arguments = process.argv.splice(2);
const path = require('path');
const [MINIENV = 'DEV'] = _arguments;
const notifier = require('node-notifier');
const templatePath = './config/api.template.js';
const configPath = './config/api.js';
const config = envConfig[MINIENV];
//读取配置文件模板
let templateConfig = fs.readFileSync(templatePath, 'utf8');
//拿到那些变量需要动态编译
const configKeys = Object.keys(config);
//通过遍历替换的方式替换模板中的占位符
configKeys.forEach((key) => {
  const regText = `%%${key}%%`;
  const regObj = new RegExp(regText, 'g');
  templateConfig = templateConfig.replace(regObj, config[key]);
  toast(`编译环境:${MINIENV}--${key}`, config[key]);
});
//把替换后的模板字符串写入api文件中
fs.writeFileSync(configPath, templateConfig);
/**
 * [@description](/user/description) 警告提示,方便开发者看到编译过后的配置文件的变量信息
 * [@author](/user/author) songs
 * [@date](/user/date) 2020-04-27
 * [@param](/user/param) {*} title
 * [@param](/user/param) {*} content
 */
function toast(title, content) {
  console.log(path.join(__dirname, './', 'login-bg.png'));
  notifier.notify({
    title: title,
    message: content,
    icon: path.join(__dirname, './', 'login-bg.png'),
  });
}

这样 每次预览或者上传之前都可以执行一次node脚本了,config文件预编译完成,再上传。虽然还是没有从根本上解决问题,但是如果配上一个上线流程规范,应该可以应付一大半的环境区分问题吧。

预编译用到的文件不需要上传,可以再project.config里设置忽略上传

	"packOptions": {
		"ignore": [
			{
				"type": "file",
				"value": "config/api.template.js"
			},
			{
				"type": "file",
				"value": "config/env.config.js"
			},
			{
				"type": "file",
				"value": "login-bg.png"
			}
		]
	},

结束!!

回到顶部