标签: google-closure-compiler

我已经设法创建了一个小型js应用程序,它使用jQuery和jQuery UI,使用谷歌的闭包编译器和高级优化.为了清楚起见:我没有编译jQuery本身,只是我的应用程序使用jquery.我想知道是否有人可以确认这个想法也适用于更大更复杂的应用程序.

程序如下:

0.-你有一个调用jquery-1.4.3.min.js,test1.js和test2.js的html文件

1.-编译您的应用程序并导出属性映射文件

java -jar closure-compiler.jar \
       --compilation_level ADVANCED_OPTIMIZATIONS \
       --js test1.js --js test2.js \
       --property_map_output_file prop.out > min.js

属性映射是一个键/值文件,其中包含编译前后的属性名称:

aprop:a
html:b
each:c

2.-将prop.out复制到prop.in并对其进行编辑,以便将jQuery属性(函数)替换为相同的名称(这可以使用list jquery的函数轻松实现):

aprop:a
html:html
each:each

3.-使用prop作为属性映射输入重新编译

java -jar closure-compiler.jar \
       --compilation_level ADVANCED_OPTIMIZATIONS \
       --js test1.js --js test2.js \
       --property_map_input_file prop.in > min.js

4.-现在在你的html中,包括min.js和jquery-1.4.3.min.js.应用程序应该是可用的,但您的代码应该更快更小.

这会缩小你的代码,而不是jquery.

正如我所说,我已经在一个小应用程序中测试了这个.如果有人拥有更大更复杂的应用程序,那么知道这样可行会很高兴.

谢谢,

HEG

我喜欢在WebStorm中使用Google Closure Compiler.我已经下载了npm.

npm install closure

从未真正使用过节点,我不知道如何执行命令行.请不要怪我.知识不是来自任何地方,这个问题与编程相关.

我想在我的 ClojureScript 项目中使用一些普通的 .js 文件。我使用 lein-cljsbuild 构建它，.js 文件是标准的 Google Closure 命名空间，带有正确的 goog.provide 声明。所以基本上我想要的是将它们合并到进入 Closure Compiler 的编译源中。那可能吗？

我正在尝试自动化 JS 库中的特定模块，但陷入了我想要定义一组属性的点（假设一个对象作为类的构造参数）。

/**
 * This function initiates world peace!
 * @constructor
 * @param {object}  defaults        - The options to initiate peace.
 * @param {number}  defaults.issues - The number of issues being taken up.
 * @param {string}  defaults.source - The name of the location where process starts.
 */
 var WorldPeace = function (defaults) {
     // code here
 };

如果构造的所有属性都在一个位置定义，那就太好了。不幸的是，我的代码有许多模块有助于构建属性。可以说，在代码的其他部分（在后面的文件中）会导致具有更多属性

 * @param {Date} defaults.start  - The date when the process started.
 * @param {Date} defaults.stop   - The date when the process …

我有一个简单的例子：

JavaScript：

function testBut(b){
   alert("!");
}

HTML：

<button onclick="testBut(this)">Test</button>

现在我通过 Google Closure 编译器运行我的 .js 脚本（从命令行运行），并且我想保持 testBut 函数完整。

我在很多地方读到我必须使用 --externs 选项并使用导出函数的名称定义另一个文件，在这种情况下它将仅包含：

function testBut(b){}

另外，我需要在我的 js 代码中添加有趣的行：

window['testBut']=testBut;

那么现在问题：

• 为了保持所需的功能，Closure 中的系统真的很愚蠢吗？需要完成两个容易出现错误的步骤？

• 是否没有“@...”注释可以简单地满足相同的目的？我尝试了@export，但它需要 --generate_exports 选项，并且仍然生成类似的丑陋且无用的 goog.a("testBut", testBut); 在目标代码中（我尝试了相同的代码，那些 goog.a(...) 似乎根本没用），这仍然需要导出文件

理想情况下，我正在寻找简单的注释或命令行开关来告诉“不要删除/重命名此函数”，尽可能简单，不添加代码，不添加其他文件。

谢谢

前段时间我在 StackOverflow 上发现了一个 JavaScript base64 编码器/解码器。它看起来像这样：

var Base64 = {

    // private property
    _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

    // private method for UTF-8 encoding
    _utf8_encode : function (string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";

        for (var n = 0; n < string.length; n++) {

            var c = string.charCodeAt(n);

            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128); …

我注意到 React 使用该@internal标签作为文档。什么程序消耗这个标签？是 jsdoc 还是别的什么？谷歌关闭编译器？我在http://usejsdoc.org/或 Google Closure Compiler 文档中找不到这个标签。它是干什么用的？

这是一个例子——

/**
 * Warn for mutations.
 *
 * @internal
 * @param {object} object
 * @param {string} key
 */
function defineWarningProperty(object, key) {

https://github.com/facebook/react/blob/master/src/classic/element/ReactElement.js

以前，我一直在使用以下构建脚本来编译 Closure 项目：

# BUILD SCRIPT 1:

closure-library/closure/bin/build/closurebuilder.py \
    --root=closure-library/ \
    --root=src/ \
    --namespace="entrypoint" \
    --output_mode=compiled \
    --compiler_jar=compiler.jar \
    --compiler_flags="--js=closure-library/closure/goog/deps.js" \
    --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" \
        > ../public_html/scripts/compiled.js

这可以正常工作，但会产生以下输出：

closure-library/closure/bin/build/closurebuilder.py: Closure Compiler 
now natively understands and orders Closure dependencies and
is prefererred over using this script for performing JavaScript 
compilation.

Please migrate your codebase.

See:
https://github.com/google/closure-compiler/wiki/Managing-Dependencies

经过多次实验，我终于让编译器正常工作（包括必要的goog.库）：

# BUILD SCRIPT 2:

java -jar compiler.jar \
    --js "src/**.js" \
    --js "closure-library/closure/goog/**.js" \
    --js "!closure-library/closure/goog/**_test.js" \
    --dependency_mode=STRICT \
    --entry_point=entrypoint \
    --compilation_level=ADVANCED_OPTIMIZATIONS \
    --js_output_file=../public_html/scripts/compiled.js …

我在 ClojureScript 中有一个应用程序，它使用 Google 的 Closure Compiler 作为编译器后端。使用高级优化的结果包似乎太大了。我归咎于依赖关系，但如何找出哪些模块在输出包中占用了最多的字节？我浏览了所有 Closure Compiler 选项，没有发现任何有用的东西。然后我尝试了解源映射并使用它来计算单个模块的大小，但没有成功。

我想要一个树状输出，我可以在其中挖掘并找到大小方面最大的模块，例如。

• [+] goog100kb
  • [+] goog.net30kb
• [+] react90kb
• [+] my50kb
  • [+] my.namespace30kb

我在 有一个 JavaScript 文件http://localhost:8000/static/home/js/edit_sites.js，它试图访问localhost:8000/static/global/js/modules/reorder.mjs.

edit_sites.js

import { reorder } from '/static/global/js/modules/reorder.mjs';

$(() => {
  reorder($('.screenshot-list'));
});

重新排序.mjs

export const reorder = ($ul) => {
  // reorder screenshots by clicking arrows
  const $up = $ul.find('.controls :first-child');
  const $down = $ul.find('.controls :last-child');
  const paddingBottom = 8;

  $up.on('click', function () {
    const $li = $(this).parents('li');

    if (!$li.is(':first-child')) {
      const $prev = $li.prev();

      $li.animate(
        { bottom: `${$prev.outerHeight() + paddingBottom}px` },
        500,
        function () {
          $(this).after($prev.detach()).prop('style', '');
        },
      );

      $prev.animate(
        { …