下面的帖子激发了我对limeJS的了解,这是我正在开发Yatzee游戏(主要是关闭)的一个辅助项目,并认为这可能是一个不错的库。

作为google-closure的初学者,我在运行未编译的代码和编译代码时遇到了一些困难,这主要是由于不知道选项和命令是什么以及依赖关系。

对于其他使用google-closuse的初学者,我已经编写了本教程。

请注意,您的闭包编译代码可以使用jQuery,但是您需要jQuery externs file。您无法将jQuery编译到您的代码中,闭包库有一个经过修饰的dojo,可以在third_party中找到。使用该代码时,您可以将代码编译到一个文件中。

您需要什么:

  • Python
  • Git客户
  • Closure compiler用于编译代码(将所有文件最小化并合并为一个)
  • Closure library类似于jQuery和jQuery ui,但可以与您的代码
  • 一起编译
  • Python(我使用2.7)
  • LimeJS作为第三方库(使用git客户端获取它,URL:https://github.com/digitalfruit/limejs.git)
  • JAVA JRE

  • 目录结构

    我正在使用Windows,并将项目放在D:\ projects中,如果您的项目在其他地方,则必须将D:\ projects引用替换为自己的引用。

    在D:\ projects中,我在该目录中创建一个称为库的目录,我从关闭库中复制goog和third_party目录(goog在关闭目录下),因为您将它们用于许多项目,我将其保留在项目根目录下,可以在您创建的每个项目中都包含它的副本,但是在这种情况下,我将在所有项目中共享该库。

    现在,我将src目录的内容从limeJS([lime clone dir] \ lime \ src)复制到D:\ projects \ libraries \ lime(其中一个目录包含名为animation,audio的子目录)。

    接下来,我将使用limeJS库中的现有项目,将[lime clone dir] \ lime \ demos \ roundball复制到D:\ projects \ roundball

    此时,您的目录结构应如下所示:
  • D:
  • 项目

  • goog
  • 青柠
  • 动画
  • 音频
  • css
  • ...
  • third_party
  • 关闭
  • ...
  • 圆球
  • Assets
  • ...其他棒球用品

  • cacldeps.py

    当您打开D:\ projects \ roundball \ rb.html并 check out 控制台(在Chrome或FireFox中按F12键,最好安装了Firebug插件)时,您会看到错误:“ReferenceError:goog is not defined”

    打开D:\ projects \ roundball \ rb.html并更改:
    <script type="text/javascript" src="../../../closure/closure/goog/base.js"></script>
    


    <script type="text/javascript" src="../libraries/goog/base.js"></script>
    

    现在,当您再次打开rb.html时,将收到另一个错误:“goog.require找不到:lime.Director”

    这是因为闭包使用deps.js来查找依赖项,并且由于石灰不在其中,因此无法找到它。对我们来说幸运的是,关闭库的bin目录中有一个名为calcdeps.py的工具可以为我们创建此文件。它会在您的代码中查找并使用goog.require找出需要哪些其他文件。如果您的文件结构比这个工具好,它将找到它。

    它将期望Director处于名为lime的目录中的,名为Director.js的文件中(确实如此)。该js文件应具有gogo.provide语句,以提供lime.Director。

    您可以添加目录,以便calcdeps.py使用 --path 参数查找。

    在D:\ projects \ roundball中,我将创建一个具有以下内容的makedeps.bat:
    set calc="D:\software\closure compiler\library\closure\bin\calcdeps.py"
    c:\Python27\python.exe %calc% ^
    --path D:\projects\roundball\ ^
    --path D:\projects\libraries\ ^
    --input D:\projects\roundball\rb.js ^
    --output_mode deps ^
    --output_file D:\projects\libraries\goog\deps.js
    pause
    

    未编译的代码使用/goog/deps.js加载依赖项。 caclcdeps.py将检查以rb.js开头的代码(因为这是代码的起点),并根据您的项目使用的内容向deps.js添加条目。

    同样,可以在闭包库的bin目录中找到cacldeps.py。

    请注意,当您有另一个项目时;假设D:\ projects \ project2,那么您必须在该项目目录中创建一个makedeps.bat,该目录将为您重新创建deps.js,然后才能运行未编译的代码。这是因为多个项目共享一个Google闭包库,因此在切换项目时,请确保在运行未编译的代码之前先构建deps.js。

    解决缺少的依赖性

    打开rt.html,我们仍然会收到一个错误,但又是一个不同的错误:错误:“lime.css的未定义nameToPath”

    查看goog / deps.js,我们可以发现lime需要使用lime.css,但在deps.js中没有任何条目。为什么是这样?在D:\ projects \ libraries \ lime中,没有css目录或css.js文件。但是在克隆git lime项目的目录中,有一个名为css的目录。

    将css目录复制到D:\ projects \ libraries \ lime并再次运行makedeps.bat,现在当您打开rt.html时它将运行。

    整个过程是未编译的,您可以设置断点以进入第三方代码。

    编译你的代码

    在生产中,您需要将代码编译到一个文件中。为了编译代码,我在D:\ projects \ roundball中创建了一个compile.bat,其内容如下:
    set calc="D:\software\closure compiler\library\closure\bin\calcdeps.py"
    c:\Python27\python.exe %calc% ^
    --path D:\projects\roundball\ ^
    --path D:\projects\libraries\ ^
    --input D:\projects\roundball\rb.js ^
    --compiler_jar "D:\software\closure compiler\compiler.jar" ^
    --output_mode compiled ^
    --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" ^
    --compiler_flags="--formatting=PRETTY_PRINT" ^
    --output_file D:\projects\roundball\compiled\roundball.js
    pause
    
    ;Need this flag for production compile:
    ;--compiler_flags="--define goog.DEBUG=false" ^
    ;Remove the following flag from production compile:
    ;--compiler_flags="--formatting=PRETTY_PRINT" ^
    ;lime libraries is giving me errors with stricter compilation
    ;  so had to remove this flag (have to fix the errors or no type checking for your code)
    ;--compiler_flags="--warning_level=VERBOSE" ^
    

    可以在下载(和提取)闭包编译器的位置找到文件Compiler.jar。

    现在,当您运行compile.bat并打开D:\ projects \ roundball \ compiled \ roundball.html时,您将在浏览器的开发人员工具中看到只加载roundball.js。

    最佳答案

    答案就在问题中,因为这是一篇howto文章,可以对某人有所帮助(将来当我忘了怎么做时,像我一样)。

    10-04 17:53