google closure编译jQuery插件

时间:2009-11-09 21:24:31

标签: jquery google-closure-compiler

我正在测试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);

6 个答案:

答案 0 :(得分:5)

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方法,所以它知道不要重命名它们。

答案 1 :(得分:4)

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

通过应用fowlloing前言,我能够成功编译文件:

// ==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);

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

答案 2 :(得分:4)

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

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

将编译为

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

这很没用。但是,如果您稍微更改源

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

将输出此

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

好多了!

答案 3 :(得分:1)

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

答案 4 :(得分:1)

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

我确信jQuery团队很快会发布一个可以使用 Advanced Compilation 选项编译的版本。

如果您对高级编译感兴趣,请查看这些tutorials。一旦你阅读了em,你就会明白为什么某些部分需要改变才能使用 Advanced Compilation 编译em而没有错误。

答案 5 :(得分:0)

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