Question

以下帖子激励我看看limeJS，作为我在Yatzee游戏中工作的一个侧面项目（大多数是关闭），并认为这可能是一个很好的库。

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

对于google-closuse的其他初学者，我写过这个教程。

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

您需要什么：

Python
Git客户端
Closure compiler用于编译代码（缩小并将所有文件合并为一个）
Closure library喜欢jQuery和jQuery ui，但可以和你的代码一起编译
Python（我使用2.7）
LimeJS作为第三方库（使用git客户端获取它，网址：https://github.com/digitalfruit/limejs.git）
JAVA JRE

目录结构

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

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

现在我将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
      - 闭合
        
        ...
  - roundball
    - 资产
    - ......其他圆球的东西

cacldeps.py

当您打开D：\ projects \ roundball \ rb.html并检查控制台（按Chrome中的F12或FireFox中最好安装了firebug插件）时，您会看到错误：＆＃34 ; ReferenceError：未定义goog＆＃34;

打开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时，你会得到一个不同的错误：＆＃34; goog.require找不到：lime.Director＆＃34;

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

预计Director会在名为lime（和它）的目录中名为director.js的文件中。那个js文件应该有一个提供lime.Director的goog.provide语句。

您可以为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添加条目。

再次，cacldeps.py可以在闭包库的bin目录中找到。

请注意，当您有另一个项目时;让我们说D：\ projects \ project2然后你必须在该项目目录中创建一个makedeps.bat，它可以为你重新创建deps.js，然后才能运行未编译的代码。这是因为多个项目共享一个谷歌闭包库，所以当你切换项目时，请确保在运行未编译的代码之前先构建deps.js。

解决遗漏的依赖

打开rt.html，我们仍然会收到错误但错误：错误：＆＃34;未定义的nameToPath for lime.css＆＃34;

在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" ^

可以在下载（和提取）闭包编译器

现在当你运行compile.bat并打开D：\ projects \ roundball \ compiled \ roundball.html时，你会在浏览器的开发者工具中看到只加载了roundball.js。

Answer 1

问题的答案就在于问题，因为它是一篇可以帮助某人的文章（就像我将来忘记怎么做的那样）。

WIKI：如何使用Lime（如何在第三方（闭包）库中使用closure-compiler）

您需要什么：

目录结构

cacldeps.py

解决遗漏的依赖

编译代码

1 个答案: