javascript - 谷歌闭包编译器高级模式破坏代码

Question

我使用 Google Closure Compiler 编译了这个示例 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)

注意:我使用的是最新的闭包编译器

Answer 1

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

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

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

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

使用你的代码

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

将被编译为

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

为了扩展这个例子，当你有一个你不想改变属性的对象时，在你声明对象时用引号括起来，例如

代替

var foo = {bar:'bar'};

使用

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

希望这会有所帮助:)