在缩小期间排除调试JavaScript代码

Question

我正在研究缩小JavaScript代码的不同方法,包括常规的JSMin,Packer和YUI解决方案.我对新的Google Closure Compiler非常感兴趣,因为它看起来非常强大.

我注意到Dean Edwards打包器有一个功能,可以排除以三个分号开头的代码行.这对于排除调试代码很方便.例如:

;;;     console.log("Starting process");

我花了一些时间来清理我的代码库,并希望添加这样的提示以轻松排除调试代码.为此做准备,我想弄清楚这是否是最佳解决方案,或者是否有其他技术.

因为我还没有选择如何缩小,我想以一种与我最终使用的最小化器兼容的方式清理代码.所以我的问题是:

1. 使用分号是一种标准技术,还是有其他方法可以做到这一点？

2. Packer是唯一提供此功能的解决方案吗？

3. 是否可以采用其他解决方案以这种方式工作,或者他们是否有其他方法来实现这一目标？

4. 我最终可能会开始使用Closure Compiler.现在有什么我应该做的准备吗？

Answer 1

这是闭包编译器的(终极)答案:

/** @const */
var LOG = false;
...
LOG && log('hello world !'); // compiler will remove this line
...

这甚至可以使用SIMPLE_OPTIMIZATIONS,没有--define=必要!

Answer 2

这是我使用Closure Compiler的内容.首先,您需要定义一个这样的DEBUG变量:

/** @define {boolean} */
var DEBUG = true;

它使用JS注释进行闭包,您可以在文档中阅读.

现在,只要你想要一些只调试代码,只需将它包装在if语句中,如下所示:

if (DEBUG) {
  console.log("Running in DEBUG mode");
}

在编译要发布的代码时,请添加以下编译命令:--define='DEBUG=false'- debug语句中的任何代码都将完全不在编译文件中.

Answer 3

在这种情况下,一个好的解决方案可能是支持"条件编译"的js-build-tools.

简而言之,您可以使用诸如此类的评论

// #ifdef debug
var trace = debug.getTracer("easyXDM.Rpc");
trace("constructor");
// #endif

在哪里定义一个pragma,如debug.

然后在构建它时(它有一个ant任务)

//this file will not have the debug code
<preprocess infile="work/easyXDM.combined.js" outfile="work/easyXDM.js"/>
//this file will        
<preprocess infile="work/easyXDM.combined.js" outfile="work/easyXDM.debug.js" defines="debug"/>

Answer 4

向代码中记录到控制台的每个位置添加逻辑会使调试和维护变得更加困难。

如果您已经打算为您的生产代码添加一个构建步骤，您总是可以在顶部添加另一个文件，将您的console方法转换为noop's。

就像是：

console.log = console.debug = console.info = function(){};

理想情况下，您只需删除任何console方法，但如果您无论如何都保留它们但不使用它们，这可能是最容易使用的。

Answer 5

到目前为止，我还没有研究过缩小，但是可以使用简单的正则表达式来完成此行为：

s/;;;.*//g

这会将三个分号之后（包括）的行中的所有内容替换为空，因此在缩小之前将其丢弃。您可以sed在运行缩小工具之前运行（或类似的工具），如下所示：

sed 's/;;;.*//g' < infile.js > outfile.js

顺便说一句，如果您想知道打包版本或缩小版本是否“更好”，请阅读JavaScript 压缩方法的比较。