没有行号,调试underscore.js模板很困难

Question

我正在将一个相当大的php模板(带有基本逻辑的页面)转换为underscore.js模板.

问题是我一直有错误,并且它被缩小"编译"版本在抛出错误时不会提供有用的信息或行号.

有没有办法在underscore.js中获得更好的模板调试(例如行号)？如果没有,有没有办法让模板终止于某一点(这样我可以缩小错误的位置).

Answer 1

勘误表截至2012年4月: Underscore 1.3.2(2012年4月9日)已引入更改_.template(),检查更改日志和来源,因为此处描述的内容可能已出现并发症.

是和否 - 模板首先被翻译成一串(难以阅读)Javascript代码并作为一个代码块执行,所以如果您正在寻找语法错误,您必须从模板中删除有问题的代码'重新尝试执行.

但是,如果它是其他东西,嵌入一个<% return __p.join(''); %>将中断执行并返回模板的结果直到那一点(读取源以查看原因,但实质上,模板块的结果被放入一个接一个的名为__p一个数组).

您还可以在模板评估时进行日志记录(即放入<% console.log(<..>) %>模板以查看诊断信息.对于更高级的故障排除,您还可以<% debugger; %>在模板代码中放入您喜欢的调试器.虽然您将看到的代码不友好阅读您将有权访问评估模板范围.

如果我正在做大量工作并需要更广泛的调试工具,我可能会复制一下underscore.js脚本并为_.template()函数本身添加一些诊断支持代码.例如:

_.template = function(str, data) {
  var c  = _.templateSettings;
  var tmpl = 'var __p=[],print=function(){__p.push.apply(__p,arguments);};' +
    'with(obj||{}){__p.push(\'' +
    str.replace(/\\/g, '\\\\')
       .replace(/'/g, "\\'")
       .replace(c.interpolate, function(match, code) {
         return "'," + code.replace(/\\'/g, "'") + ",'";
       })
       .replace(c.evaluate || null, function(match, code) {
         return "');" + code.replace(/\\'/g, "'")
                            .replace(/[\r\n\t]/g, ' ') + "__p.push('";
       })
       .replace(/\r/g, '\\r')
       .replace(/\n/g, '\\n')
       .replace(/\t/g, '\\t')
       + "');}return __p.join('');";
  console.log(tmpl.replace(/;/g, '\n')); // <- dump compiled code to console before evaluating
  var func = new Function('obj', tmpl);
  return data ? func(data) : func;
};