使用SVN hook 让前端BUG少一点

你有没有发生过,发布的代码中含有 console ,然后在 IE 下报错?或者代码中有调试用的alert,用户点击某个东西后,就会弹出来?

这种错误 ,我相信前端开发者或多或少都会犯,要避免这类的BUG ,需要非常非常小心,但是人总会有疏忽的时候,这样的事情交给机器办比较合适,因为机器会按照指定的规则来检查你提交的代码,每次都完全按照规则来。

版本管理软件一般都有预置的hook,我们可以写一些脚本在我们对代码仓库做操作的时候来执行,这里,我将给出一个 TortoiseSVN 可以使用的 client side hook 脚本来做这种检测。

这个是目前我在实际生产环境使用过一段时间的,因为我们这里使用的 SVN 做版本控制,SVN 标准只需要 server 端实现 hook script,客户端不需要,由于大公司server端不那么容易去更改,恰巧 TortoiseSVN 实现了 clientside hook ,那就用这个来实现吧。

按照官方文档给的 pre commit hook script 修改而来,使用前,先要检查你的windows 是否用 WScript 关联了 .js 文件,绝大部分前端开发人员都关联了某个编辑器吧。

检测方法:随便新建一个 js 文件,里面写上”WScript.Echo(“Hello World!”);”,双击看能不能运行,如果你关联了编辑器,就肯定不行了,如果弹出个窗口“hello world”,那就可以跳过这一节了。

恢复windows 默认 .js 文件关联程序的方法:修改注册表,[HKEY_CLASSES_ROOT\.js] 项下的那个默认值改成 “JSFile”。修改完后看看刚才的测试文件是否正常运行。

然后,在本地磁盘任意位置新建 .js 文件,保存此代码:

/**
* author: Allen.M
* blog: http://blog.allenm.me
* date: 2010-12-13
* 根据 http://tortoisesvn.googlecode.com/svn/trunk/contrib/hook-scripts/client-side/PreCommit.js.tmpl 修改
* this script is a local pre-commit hook script.
*/
var objArgs,num;

objArgs = WScript.Arguments;
num = objArgs.length;
if (num != 4)
{
    WScript.Echo("Usage: [CScript | WScript] PreCommit.js path/to/pathsfile depth path/to/messagefile path/to/CWD ");
    WScript.Quit(1);
}

var paths = readPaths(objArgs(0));
var message = "list of paths selected for commit:\n";
var pattern = /^\s*(?!\/\/)(alert|console)/;
var haveWarning = false;
var i = 0;
while (i < paths.length)
{
	message = message + paths[i] + "\n";

	var content = readPaths(paths[i]);

	for(var m = 0, l = content.length; m < l; m++){
		if(pattern.test(content[m])){
			haveWarning = true;
			message = message + 'warning: ' + paths[i] + ' line ' + (m+1) + ' have "alert" or "console" \n';
		}
	}
	i = i + 1;
}
message = message + "path of message file is: " + objArgs(2) + "\n";

if(haveWarning){
	WScript.Echo(message);
}
WScript.Quit(0);

function readPaths(path)
{
	var retPaths = new Array();
	var fs = new ActiveXObject("Scripting.FileSystemObject");
	if (fs.FileExists(path))
	{
		var a = fs.OpenTextFile(path, 1, false);
		var i = 0;
		while (!a.AtEndOfStream)
		{
			var line = a.ReadLine();
			retPaths[i] = line;
			i = i + 1;
		}
		a.Close();
	}
	return retPaths;
}

然后按照下图所示配置脚本。

需要注意的是,指定脚本文件的地方,一定要在前面加上WScript,否则你 ci 代码的时候会得到一个出错信息。

此脚本不干涉你CI代码,即使有 alert ,console 等关键字,也只会给出个 warning ,代码还是可以 ci 成功,当出现 warning 的时候,你需要做的是检查代码是不是有问题。 //console 这样被注释掉的代码是被忽略的。另外你的代码要使用 windows格式的换行符,否则会有检测失败的情况。

检测代码的关键代码是中间的那行正则,你可以修改为适合你的。

warning 是这种形式显示的,如果无warning 信息,则会安安静静的。