jQuery 带有 jQ​​uery 应用程序的 Google Closure Compiler

Google Closure Compiler with jQuery applications

提问by Tauren

I have a lot of time invested in jquery and a large application built with it. Recently I've been reviewing Google Closure Library, but at this time have found it to be not nearly as elegant as jquery. I believe it may have some potential and will look into it more, but for now I intend to continue using jQuery as my base framework.

我在 jquery 和用它构建的大型应用程序上投入了大量时间。最近我一直在Google Closure Library，但此时发现它不如 jquery 优雅。我相信它可能有一些潜力，并将进一步研究它，但现在我打算继续使用 jQuery 作为我的基础框架。

However, I'm extremely impressed with Google Closure Compiler. I would love to start using it during the build process of my application. Unfortunately, it isn't exactly clear how easy it will be to use it for projects that do not follow the standard Google Closure standards.

但是，我对Google Closure Compiler印象非常深刻。我很想在我的应用程序的构建过程中开始使用它。不幸的是，对于不遵循标准 Google Closure 标准的项目使用它会有多容易，目前尚不清楚。

Are there any best-practices or good resources on developing jquery-based projects and using the Google Closure Compiler? For instance:

是否有关于开发基于 jquery 的项目和使用 Google Closure Compiler 的最佳实践或好的资源？例如：

1. Does it make sense to compile jquery and jquery-ui with it, or should I continue pointing to these resources on the google CDN? I'm sure my jquery and jquery-ui will be smaller since I don't use all features of the libraries, but pointing to a CDN increases the the chances the file is already be in a visitor's cache.

2. My application is split into manyfiles, with a file per function. I'd like to combine them in a specific order and minify them into a file per section on my site. I'd like to automate this process.

3. Currently my project has a java backend and is built with Maven. Does it make sense to add Google Closure Compiler to this build process?

1. 用它编译 jquery 和 jquery-ui 是否有意义，还是我应该继续指向 google CDN 上的这些资源？我确信我的 jquery 和 jquery-ui 会更小，因为我没有使用库的所有功能，但是指向 CDN 会增加文件已经在访问者缓存中的机会。

2. 我的应用程序被分成许多文件，每个函数一个文件。我想按特定顺序将它们组合起来，并将它们缩小到我网站上每个部分的文件中。我想自动化这个过程。

3. 目前我的项目有一个 java 后端，是用 Maven 构建的。将 Google Closure Compiler 添加到此构建过程是否有意义？

Basically, I'm looking for any good resources that are specific to using Google Closure Compiler with jQuery.

基本上，我正在寻找任何特定于将 Google Closure Compiler 与 jQuery 结合使用的好资源。

回答by Anurag

Google Closure Compiler is jQuery or any other library agnostic. It has two types of optimizations -

Google Closure Compiler 与 jQuery 或任何其他库无关。它有两种类型的优化 -

• Simple
• Advanced

• 简单的
• 先进的

I tried applying advanced optimizations, but it severely broke my application. If it does the same, you could either try to fix your application, or use simple optimization. There was a 32% drop in size with simple optimizations, and around 68% with advanced optimizations, but that didn't work out anyways.

我尝试应用高级优化，但它严重破坏了我的应用程序。如果它也这样做，您可以尝试修复您的应用程序，或者使用简单的优化。简单优化的大小减少了 32%，高级优化的大小减少了大约 68%，但无论如何都没有奏效。

Moving the JS concatenation in an automated fashion to your build process is definitely the way to go. See JavaScript dependency management.

以自动化方式将 JS 连接移动到您的构建过程中绝对是要走的路。请参阅JavaScript 依赖项管理。

jQuery is already heavily optimized for byte-size, so I doubt you will be able to squeeze enough juice by using Google Closure Compiler, but it's worth a try when combined with your project.

jQuery 已经针对字节大小进行了大量优化，所以我怀疑您是否能够通过使用 Google Closure Compiler 榨取足够的汁液，但是与您的项目结合使用时值得一试。

I see Google Closure Library in a favorable light, but haven't gotten to using it, as I'm heavily invested in MooTools at this point. Looking at it's API, it seems it has a rather broad coverage on what it has to offer besides just DOM manipulations, AJAX handling, event handling etc.

我看好 Google Closure Library，但还没有开始使用它，因为此时我在 MooTools 上投入了大量资金。看看它的API，除了 DOM 操作、AJAX 处理、事件处理等之外，它似乎对它必须提供的内容有相当广泛的覆盖。

回答by reelfernandes

$(elem)['width']()instead of $(elem).width()

$(elem)['width']()代替 $(elem).width()

This works with ADVANCED_OPTIMIZATIONS, so that the closure compiler doesn't refactor the jQuery methods.

这适用于 ADVANCED_OPTIMIZATIONS，因此闭包编译器不会重构 jQuery 方法。

回答by HOCA

I believe as of 1.4.2 (maybe earlier), jQuery is minified using Google Closure Compiler by default. So it's probably best to continue referencing jQuery/jQuery UI via the google CDN. However, there are still benefits to integrating the Closure compiler into your build process to combine and minify your JS files. Namely, reduced JS requests per page load and smaller data transfered in hopes of improving your client side page load performance. These are some of the challenges we encountered while integrating Closure compiler into our build process:

我相信从 1.4.2（可能更早）开始，jQuery 默认使用 Google Closure Compiler 进行缩小。所以最好继续通过谷歌 CDN 引用 jQuery/jQuery UI。但是，将 Closure 编译器集成到您的构建过程中以组合和缩小您的 JS 文件仍然有好处。也就是说，减少了每页加载的 JS 请求和传输的较小数据，以期提高您的客户端页面加载性能。这些是我们在将 Closure 编译器集成到我们的构建过程中时遇到的一些挑战：

1. Constructing compilation command- We needed a means of invoking the compiler with all the necessary parameters in an automated manner during the build process. For us, this meant writing a console app to construct the command. If shell scripting is available in your environment, that could be an advantage.

2. Managing Dependencies- The Closure compiler does have the capability to automatically sort the order of the combined JS such that dependencies are preserved. In order to leverage this feature, the JS files must be annotated with goog.provide\goog.requireto tell the compiler what the dependencies are (--manage_closure_dependencies). The compiler will also exclude any JS that isn't required (i.e. is not referenced via a goog.requirestatement) from the combined JS. Here are a few things to watch out for:

   • If you want to include all of you JS files in the combined output, ensure that you include a "manifest" JS file in the compilation that only contains goog.requirestatements for each file to be included combined script (i.e. no goog.providestatements).
   • If you aren't using the Closure Library, ensure that you are compiling using SIMPLE_OPTIMIZATIONSor higher. Otherwise, the compiler will not remove the goog.provide/goog.requirestatements. Alternatively, you could also define your own goog.provide/goog.requireJS functions to avoid errors.
   • Ensure there are nocyclical dependencies, or face the consequences.

3. Compiling a debug version of the combined script- If needed, you can compile a debug version of the combined script using the --formatting PRETTY_PRINTflag. This will output the equivalent script formatted with whitespaces intact for development/debugging.

1. 构建编译命令- 我们需要一种在构建过程中以自动方式调用具有所有必要参数的编译器的方法。对我们来说，这意味着编写一个控制台应用程序来构建命令。如果您的环境中可以使用 shell 脚本，那可能是一个优势。

2. 管理依赖关系- Closure 编译器确实能够自动对组合 JS 的顺序进行排序，以便保留依赖关系。为了利用此功能，必须对 JS 文件进行注释goog.provide\goog.require以告诉编译器依赖项是什么（--manage_closure_dependencies）。编译器还将goog.require从组合的 JS 中排除任何不需要（即未通过语句引用）的 JS。以下是一些需要注意的事项：

   • 如果要在组合输出中包含所有 JS 文件，请确保在编译中包含一个“清单”JS 文件，该文件仅包含goog.require要包含组合脚本的每个文件的goog.provide语句（即没有语句）。
   • 如果您不使用 Closure 库，请确保您正在编译使用SIMPLE_OPTIMIZATIONS或更高版本。否则，编译器不会删除这些goog.provide/goog.require语句。或者，您也可以定义自己的goog.provide/goog.requireJS 函数以避免错误。
   • 确保没有循环依赖，否则将面临后果。

3. 编译组合脚本的调试版本- 如果需要，您可以使用--formatting PRETTY_PRINT标志编译组合脚本的调试版本。这将输出格式为空白的等效脚本，用于开发/调试。

Although, the Closure compiler documentation can be sparse at times, it does have enough to get started for the most part and is continuously improving - so check regularly for updates, not just SO ;)

尽管 Closure 编译器文档有时可能很稀少，但它确实足以在大多数情况下开始使用并且正在不断改进 - 因此请定期检查更新，而不仅仅是 SO ;)

Hope this helps.

希望这可以帮助。

回答by Fatih Acet

Using jQuery with closure compiler advanced mode

在闭包编译器高级模式下使用 jQuery

回答by Stephen Chung

jQuery is not compatible (yet) with the Closure Compiler in advanced mode. I agree it would be a very good thing to make it compatible, because its method-chaining syntax lends very readily to prototype virtualization for much improved execution speed.

jQuery 与高级模式下的闭包编译器（尚）不兼容。我同意让它兼容是一件非常好的事情，因为它的方法链语法非常容易用于原型虚拟化，以大大提高执行速度。

In fact, among the popular JavaScript libraries (other than Closure Library, that is), only the Dojo Toolkit is compatible with Closure Advanced mode.

事实上，在流行的 JavaScript 库中（除了 Closure Library），只有 Dojo Toolkit 兼容 Closure Advanced 模式。

http://dojo-toolkit.33424.n3.nabble.com/file/n2636749/Using_the_Dojo_Toolkit_with_the_Closure_Compiler.pdf?by-user=t

http://dojo-toolkit.33424.n3.nabble.com/file/n2636749/Using_the_Dojo_Toolkit_with_the_Closure_Compiler.pdf?by-user=t

回答by ansiart

Getting jQuery to work well with closure compiler/advanced has been difficult for me, but since you're dealing with multiple files I think it's important that you look into the modules option here:

让 jQuery 与闭包编译器/高级版一起工作对我来说很困难，但由于您正在处理多个文件，我认为您在此处查看模块选项很重要：

Using the --module option in Closure Compiler to create multiple output files

使用 Closure Compiler 中的 --module 选项创建多个输出文件

I've been digging around for good documentation on the web, but there is VERY VERYlittle. By using a single jQuery extern, I was able to compile with advanced fine -- with multiple files, etc.

我一直在四处寻找在网络上良好的文档，但非常非常少。通过使用单个 jQuery extern，我能够使用高级精编译 - 多个文件等。

@echo off
java -jar bin\compiler.jar ^
    --compilation_level=ADVANCED_OPTIMIZATIONS ^
    --externs "externs\jquery-1.8.js" ^
    --language_in=ECMASCRIPT5_STRICT ^
    --warning_level=VERBOSE ^
    --module_output_path_prefix .\compiled\ ^
    ^
    --module_wrapper core:"(function(){%%s%%})();" ^
    --js ".\corelib.js" ^
    --module core:1 ^
    ^
    --module_wrapper somescript"(function(){%%s%%})();" ^
    --js ".\some_other_runtime_loaded_script" ^
    --module somescript:1:core ^
    ^
    --module_wrapper somescript1:"(function(){%%s%%})();" ^
    --js ".\some_other_runtime_loaded_script" ^
    --module somescript1:1:core

descriptions

说明

--module_wrapper name:wrapper

This allows you to wrap your scripts in a closure -- since the compiler by default will remove them. If you're using "use strict" like I am, that's a no no.

这允许您将脚本包装在一个闭包中——因为默认情况下编译器会删除它们。如果您像我一样使用“严格使用”，那是不行的。

--module name:#:dependency

name       Name of the script that will get written
#          number of scripts above that line to include into this script
dependency What script does this depend on?

回答by Arthur Ronald

Tauren, you can test your code by using closure-compilerhome. You can import your JQuery library or something else and try it. If possible, define your JavaScript code by using anonymous function which avoids naming conflict. Use namespaces by using Google library providefunction. Another good resource which can help you is Google JavaScript Style Guide

牛头人，您可以使用闭包编译器主页来测试您的代码。您可以导入您的 JQuery 库或其他内容并尝试一下。如果可能，请使用匿名函数定义您的 JavaScript 代码，以避免命名冲突。通过使用 Google 库提供函数来使用命名空间。另一个可以帮助您的好资源是Google JavaScript Style Guide

回答by Oleksandr Knyga

You may use kjscompiler: https://github.com/knyga/kjscompilerand specify any libraries you like as external. They would not be minified. Really nice solution.

您可以使用 kjscompiler：https: //github.com/knyga/kjscompiler并将您喜欢的任何库指定为外部库。它们不会被缩小。真的很好的解决方案。