WIKI：如何使用 Lime（如何将闭包编译器与 3rd 方（闭包）库一起使用）

Question

下面的帖子启发了我看一下limeJS，作为一个我正在开发和关闭的Yatzee游戏（大部分是关闭的）的副项目，并认为这可能是一个不错的库。

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

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

请注意，您的闭包编译代码可以使用 jQuery，但您需要 jQuery externs file。你不能将 jQuery 编译到你的代码中，闭包库有一个可以在 third_party 中找到的简化的 dojo。使用它时，您可以将代码编译到一个文件中。

你需要什么：

1. Python
2. Git 客户端
3. Closure compiler 用于编译代码（将所有文件压缩并合并为一个）
4. Closure library 与 jQuery 和 jQuery ui 类似，但可以与您的代码一起编译
5. Python（我用的是 2.7）
6. LimeJS 作为 3rd 方库（使用 git 客户端获取，url:https://github.com/digitalfruit/limejs.git）
7. JAVA JRE

目录结构

我使用的是 Windows，并且我的项目位于 D:\projects 中，如果您的项目位于其他位置，则必须将 D:\projects 引用替换为您自己的。

在 D:\projects 中，我在该目录中创建了一个名为 libraries 的目录我从闭包库中复制 goog 和 third_party 目录（goog 在闭包目录下），因为您将在许多项目中使用它们我将它保存在项目根目录，您可以在您创建的每个项目中包含它的副本，但在这种情况下，我将在所有项目之间共享该库。

现在我将 src 目录的内容从limeJS ([lime clone dir]\lime\src) 复制到 D:\projects\libraries\lime（包含名为动画、音频...的子目录的目录）。

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

此时你的目录结构应该是这样的：

• D：
  • 项目
    • 库
      • 谷歌
      • 石灰
        • 动画
        • 音频
        • CSS
        • ...
      • 第三方
        • 关闭
          • ...
    • 圆球
      • 资产
      • ...其他圆球的东西

cacldeps.py

​​>

当你打开 D:\projects\roundball\rb.html 并检查控制台（在 Chrome 或 FireFox 中按 F12 最好安装了 firebug 插件）你会看到一个错误："ReferenceError: goog is未定义”

打开 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 could not find:lime.Director"

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

它会认为 Director 位于一个名为lime 的目录中的一个名为director.js 的文件中（确实如此）。该 js 文件应该有一个 goog.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，我们仍然得到一个错误，但是一个不同的：错误："Undefined nameToPath forlime.css"

查看goog/deps.js我们可以发现lime需要lime.css但是在deps.js中没有入口。为什么是这样？查看 D:\projects\libraries\lime 没有 css 目录或 css.js 文件。但是在您克隆 gitlime 项目的目录中，有一个名为 css 的目录。

将 css 目录复制到 D:\projects\libraries\lime 并再次运行 makedeps.bat，现在打开 rt.html 就会运行。

整个东西是未编译的，你可以设置断点来进入 3rd 方代码。

编译你的代码

在生产中，您可能希望将代码编译为一个文件。为了编译代码，我在 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

答案就在问题中，因为这是一篇可以帮助某人的操作指南文章（就像我将来忘记如何做时一样）。