google 闭包编译 jQuery 插件

Question

我正在测试 google closure-compiler 并希望使用“高级”选项编译 facebox Plugin，但在尝试查找“a.H”时出现错误。

有没有人试过用这个选项编译jQuery插件，结果很好。

谢谢。

编辑： 显然这是对 jQuery 方法的重命名，但是是否可以包含 jQuery 并平等地重命名所有方法？。

编辑

带有“externs_url”选项的代码示例：

with closure-compiler

js输入代码

// ==ClosureCompiler==
// @output_file_name default.js
// @formatting pretty_print
// @compilation_level ADVANCED_OPTIMIZATIONS
// @warning_level QUIET
// @externs_url http://code.jquery.com/jquery-1.5.min.js
// ==/ClosureCompiler==

// ADD YOUR CODE HERE

var test = function($, context) {

  var
    _self = this;

  _self.mymethod = function() {

    var lista = $("a", context);

    lista.attr("target", "_blank");

    return lista.html();

  };


  return {"mymethod":_self.mymethod};

}.call({}, jQuery, context);    

js输出代码

(function(b, c) {
  this.a = function() {
    var a = b("a", c);
    a.attr("target", "_blank");
    return a.html()
  };
  return{mymethod:this.a}
}).call({}, jQuery, context);

Answer 1

jQuery 库本身 can't be compiled with ADVANCED_OPTIMIZATIONS，但您可以使用指定整个 jQuery API 的 Closure Compiler externs 文件来编译您自己的代码并进行高级优化。从Closure Compiler repository 下载与您的 jQuery 版本相关的 externs 文件。在示例中，我将使用 1.4.3 版本

以下假设您的应用程序代码在application.js 中，而compiler.jar 是Google Closure Compiler jar 文件（在this zip file 中提供）：

java -jar compiler.jar \
--compilation_level ADVANCED_OPTIMIZATIONS \
--externs jquery-1.4.3.externs.js \
--js_output_file output.js \
application.js

externs 文件告诉 Closure Compiler 存在哪些 jQuery 方法，因此它知道不要重命名它们。

Answer 2

我在尝试压缩 jQuery 插件的自定义 JS 库时遇到了同样的问题。闭包（除非你给它一个不这样做的理由）只会重命名插件中的任何 jQuery 库调用。更糟糕的是，它甚至不会警告你（它怎么会？它假设你程序员知道你在做什么！）解决方案是引用外部 js 文件（或指向库的 url）。我使用了网络工具： http://closure-compiler.appspot.com/home

通过应用以下序言，我能够成功编译文件：

// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @warning_level QUIET
// @output_file_name default.js
// @formatting pretty_print
// @externs_url http:// ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js
// @externs_url http:// ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js
// ==/ClosureCompiler==

剩下的唯一问题是让编译器意识到插件名称不能简化：

(function($) { $.fn.extend({ <name>:function(options) { } }); })(jQuery);

因为这是暴露给世界的名字。有什么想法吗？

Answer 3

要使用高级选项正确编译 jQuery 插件，您必须稍微修改源代码。所有外部函数都应该使用带引号的字符串而不是点语法。这将确保闭包编译器将保留外部函数名称。例如；

$.fn.pluginName = function(opts) {
  // plugin code
}

将编译为

$.a.b=function(){};

这没什么用。但是，如果你稍微改变一下来源

$.fn['pluginName'] = function(opts) {
  // plugin code
}

会输出这个

$.a.pluginName=function(){};

好多了！

Answer 4

当我尝试使用 Closure 编译器时，我访问的函数的名称发生了变化。因此，当我使用（作为示例）$.each(// code) 时，编译器将其更改为$.a(// code )。我相信有你的问题。

Answer 5

是的，您必须将 jquery.js 和 plugin.js 连接到一个文件中，但目前 jQuery 的某些部分无法正确压缩高级编译选项，但您仍然可以使用简单编译。

我相信 jQuery 团队很快就会发布一个可以使用高级编译选项进行编译的版本。

如果您对高级编译感兴趣，请查看这些tutorials。阅读它们后，您就会明白为什么需要更改某些部分才能使用高级编译无错误地编译它们。

Answer 6

我认为您必须在应用程序中包含所有脚本才能使其在所有脚本中运行。