3

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

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

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

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

你需要什么：

  1. Python
  2. Git客户端
  3. 用于编译代码的闭包编译器（将所有文件缩小并合并为一个）
  4. 闭包库，如 jQuery 和 jQuery ui，但可以与您的代码一起编译
  5. Python（我使用 2.7）
  6. LimeJS 作为第 3 方库（使用 git 客户端获取，网址：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

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

  • 丁：
    • 项目
      • 图书馆
        • 古格
        • 酸橙
          • 动画
          • 声音的
          • css
          • ...
        • 第三者
          • 关闭
            • ...
      • 圆球
        • 资产
        • ...其他圆球的东西

卡迪普斯.py

当您打开 D:\projects\roundball\rb.html 并检查控制台（在 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 文件应该有一个 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 我们仍然得到一个错误，但另一个错误：错误：“Lime.css 的未定义 nameToPath”

查看 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。

4

1 回答 1

1

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

于 2013-09-28T15:40:07.333 回答