谷歌闭包编译器ADVANCED模式破坏代码

Question

我使用谷歌闭包编译器编译了这个例子的JavaScript代码。

$(document).on('click', function () {
   console.log('Hello');
});

并且，我从中得到了这个输出。

$(document).a("click",function(){console.log("Hello")});

在这里，on 被替换为 a。因此，当我在浏览器上运行时，我遇到了错误。

我使用以下命令行来编译脚本。

java -jar closure-compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js script.js

当我使用--process_jquery_primitives参数时，我遇到了这个错误。

java.lang.RuntimeException: com.google.javascript.jscomp.CompilerOptionsPreprocessor$InvalidOptionsException: The jQuery pass and the Closure pass cannot both be enabled.
        at com.google.javascript.jscomp.CompilerExecutor.runInCompilerThread(CompilerExecutor.java:126)
        at com.google.javascript.jscomp.Compiler.runInCompilerThread(Compiler.java:740)
        at com.google.javascript.jscomp.Compiler.compile(Compiler.java:710)
        at com.google.javascript.jscomp.Compiler.compile(Compiler.java:680)
        at com.google.javascript.jscomp.AbstractCommandLineRunner.doRun(AbstractCommandLineRunner.java:1080)
        at com.google.javascript.jscomp.AbstractCommandLineRunner.run(AbstractCommandLineRunner.java:492)
        at com.google.javascript.jscomp.CommandLineRunner.main(CommandLineRunner.java:1866)
Caused by: com.google.javascript.jscomp.CompilerOptionsPreprocessor$InvalidOptionsException: The jQuery pass and the Closure pass cannot both be enabled.
        at com.google.javascript.jscomp.CompilerOptionsPreprocessor.preprocess(CompilerOptionsPreprocessor.java:74)
        at com.google.javascript.jscomp.Compiler.compileInternal(Compiler.java:746)
        at com.google.javascript.jscomp.Compiler.access$000(Compiler.java:84)
        at com.google.javascript.jscomp.Compiler$2.call(Compiler.java:713)
        at com.google.javascript.jscomp.Compiler$2.call(Compiler.java:710)
        at com.google.javascript.jscomp.CompilerExecutor$2.call(CompilerExecutor.java:91)
        at java.util.concurrent.FutureTask.run(Unknown Source)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
        at java.lang.Thread.run(Unknown Source)

注意：我正在使用最新的闭包编译器（closure compiler）。

- Temüjin

---

并非所有的代码都适用于ADVANCED模式编译。请参阅http://closuretools.blogspot.com/2012/09/which-compilation-level-is-right-for-me.html。 - Chad Killingsworth

Answer 1

输出结果发生变化的原因是由于编译级别设置为ADVANCED_OPTIMIZATIONS，Closure编译器会将所有函数和变量重命名为最简单的形式。

它已经配置了要避免重命名的函数和变量名称，如console.log和属性名称如height、width等。默认情况下，它不理解应该不重命名jQuery函数，因此当遇到它们时，它们将被更改。

有两种方法可以解决这个问题：

1. 创建一个jQuery externs文件并将其传递给编译器。Externs文件是一个包含函数和变量定义的文件，可帮助编译器识别它不应重命名与提供的定义匹配的任何内容。
2. 使用方括号表示法而不是点表示法来访问jQuery函数和变量。使用此方法，方括号将转换为点表示法，但不会重命名变量。

使用您的代码：

$(document)['on']('click', function () {
   console.log('Hello');
});

将被编译为

$(document).on("click",function(){console.log("Hello")});

为了扩展这个例子，当你有一个带有属性的对象，而你不希望对其进行更改时，在声明对象时使用引号将其括起来，例如：

不要使用：

var foo = {bar:'bar'};

使用

var foo = {'bar':'bar'};

希望这能有所帮助 :)

- Ben

---

精心维护的jQuery外部函数库是编译器项目的一部分（通过npm分发）。请参阅 https://github.com/google/closure-compiler/tree/master/contrib/externs。 - Chad Killingsworth

Answer 2

考虑使用--process_jquery_primitives。来自文档：

jQuery使用Closure Compiler本身无法理解的约定。为了生成可运行的代码，消除警告并启用优化，Closure Compiler会以类似于其他语言中宏展开的方式扩展已知的jQuery方法和别名。

- orip

---

当我在命令行中使用该参数时，出现了这个错误。 - Temüjin