javascript - 维基百科:如何使用Lime(如何将闭包编译器与第三方(闭包)库一起使用)

Question

下面的帖子激发了我对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。

Answer 1

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