下面的帖子激发了我对limeJS的了解,这是我正在开发Yatzee游戏(主要是关闭)的一个辅助项目,并认为这可能是一个不错的库。
作为google-closure的初学者,我在运行未编译的代码和编译代码时遇到了一些困难,这主要是由于不知道选项和命令是什么以及依赖关系。
对于其他使用google-closuse的初学者,我已经编写了本教程。
请注意,您的闭包编译代码可以使用jQuery,但是您需要jQuery externs file。您无法将jQuery编译到您的代码中,闭包库有一个经过修饰的dojo,可以在third_party中找到。使用该代码时,您可以将代码编译到一个文件中。
您需要什么:
目录结构
我正在使用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
此时,您的目录结构应如下所示:
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文章,可以对某人有所帮助(将来当我忘了怎么做时,像我一样)。