WIKI:如何使用 Lime(如何将闭包编译器与 3rd 方(闭包)库一起使用)

2022-01-15 00:00:00 dependencies javascript google-closure-compiler google-closure-library limejs

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

The following post inspired me to have a look at limeJS, as a side project I'm working on and off an a Yatzee game (mostly off) and thought that might be a nice library to use.

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

As a beginner in google-closure I had some difficulties running uncompiled code and getting code compiled, mostly due to not knowing what the options and commands are and because of dependencies.

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

For other beginners with google-closuse I have written this tutorial.

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

Note that jQuery can be used by your closure compiled code but you need the jQuery externs file. You can't compile jQuery into your code, closure library has a dressed down dojo that can be found in third_party. When using that you can compile your code to one file.

  1. Python
  2. Git 客户端
  3. 闭包编译器用于编译代码(将所有文件压缩并合并为一个)
  4. 闭包库类似于 jQuery 和 jQuery ui，但可以与您的代码一起编译李>
  5. Python(我用的是 2.7)
  6. LimeJS 作为 3rd 方库(使用 git 客户端获取，url:https://github.com/digitalfruit/limejs.git)
  7. JAVA JRE
  1. Python
  2. Git client
  3. Closure compiler for compiling code (minifying and merging all files into one)
  4. Closure library like jQuery and jQuery ui but can be compiled along with your code
  5. Python (I use 2.7)
  6. LimeJS As a 3rd party library (use git client to get it, the url:https://github.com/digitalfruit/limejs.git)
  7. JAVA JRE

目录结构

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

Directory structure

I'm using Windows and have my projects in D:projects, if you have your projects somewhere else you have to replace D:projects references to your own.

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

In D:projects I make a directory called libraries in that directory I copy the goog and third_party directories from closure library (goog is under the closure directory) since you'll use them for many projects I keep it at projects root, you can include a copy of it in every project you create but in this case I'll share the library among all projects.

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

Now I copy the contents of the src directory from limeJS ([lime clone dir]limesrc) to D:projectslibrarieslime (the one containing the sub directories called animation, audio ...).

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

Next I'll use an existing project from the limeJS library, copy the [lime clone dir]limedemosoundball to D:projectsoundball

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

At this time your directory structure should look like this:

  • D:
    • 项目
      • 库
        • 谷歌
        • 石灰
          • 动画
          • 音频
          • css
          • ...
          • 关闭
            • ...
            • 资产
            • ...其他圆球的东西

            当你打开 D:projectsoundballb.html 并检查控制台(在 Chrome 或 FireFox 中按 F12 最好安装了 firebug 插件)你会看到一个错误:"ReferenceError: goog is未定义"

            When you open D:projectsoundballb.html and check out the console (press F12 in Chrome or in FireFox preferably having firebug plugin installed) you'll see an error: "ReferenceError: goog is not defined"

            打开 D:projectsoundballb.html 并更改:

            Open up D:projectsoundballb.html and change:

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

            Now when you open up rb.html again you get a different error: "goog.require could not find: lime.Director"

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

            This is because closure uses deps.js to find dependencies and since lime is not in there it can't find it. Lucky for us there is a tool called calcdeps.py in the bin directory of the closure library that can create this file for us. It'll look in your code and and use goog.require to figure out what other files are needed. If your file structure is good than this tool will find it.

            它会认为 Director 位于一个名为lime 的目录中的一个名为director.js 的文件中(确实如此).该 js 文件应该有一个 goog.provide 语句，提供lime.Director.

            It will expect that Director is in a file called director.js in a directory called lime (and it is). That js file should have a goog.provide statement providing lime.Director.

            您可以为 calcdeps.py 添加目录以使用 --path 参数查看.

            You can add directories for calcdeps.py to look in with the --path parameter.

            在 D:projectsoundball 中，我将创建一个 makedeps.bat，其内容如下:

            In D:projectsoundball I'll create a makedeps.bat with the following content:

            set calc="D:softwareclosure compilerlibraryclosureincalcdeps.py"
c:Python27python.exe %calc% ^
--path D:projectsoundball ^
--path D:projectslibraries ^
--input D:projectsoundballb.js ^
--output_mode deps ^
--output_file D:projectslibrariesgoogdeps.js
pause

            未编译的代码使用/goog/deps.js 加载依赖项.caclcdeps.py 将检查以 rb.js 开头的代码(因为这是代码的起点)，并根据您的项目使用情况将条目添加到 deps.js.

            Uncompiled code uses /goog/deps.js to load dependencies. caclcdeps.py will check your code starting with rb.js (as this is the starting point of the code) and add entries to deps.js according to what your project uses.

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

            Once again, cacldeps.py can be found in the bin directory of closure library.

            请注意，当您有另一个项目时；假设 D:projectsproject2 那么您必须在该项目目录中创建一个 makedeps.bat 来重新为您创建 deps.js，然后才能运行未编译的代码.这是因为多个项目共享一个 google 闭包库，因此当您切换项目时，请确保在运行未编译的代码之前先构建 deps.js.

            Note that when you have another project; let's say D:projectsproject2 then you have to create a makedeps.bat in that project directory that re creates the deps.js for you before you can run the uncompiled code. This because multiple projects share one google closure library so when you switch projects make sure you'll build the deps.js first before running your uncompiled code.

            打开 rt.html 我们仍然得到一个错误，但另一个错误:错误:"Undefined nameToPath forlime.css"

            Opening the rt.html we still get an error but a different one: Error: "Undefined nameToPath for lime.css"

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

            Looking in goog/deps.js we can find that lime.css is needed by lime but doesn't have an entry in deps.js. Why is this? Looking in D:projectslibrarieslime there is no css directory or css.js file. But in the directory where you cloned the git lime project there is a directory called css.

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

            Copy the css directory to D:projectslibrarieslime and run makedeps.bat again, now when you open rt.html it will run.

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

            The whole thing is uncompiled and you can set breakpoints to step into 3rd party code.

            在生产中，您可能希望将代码编译为一个文件.为了编译代码，我在 D:projectsoundball 中创建了一个 compile.bat，内容如下:

            In production you would want to compile the code to one file. To compile the code I created a compile.bat in D:projectsoundball with the following content:

            set calc="D:softwareclosure compilerlibraryclosureincalcdeps.py"
c:Python27python.exe %calc% ^
--path D:projectsoundball ^
--path D:projectslibraries ^
--input D:projectsoundballb.js ^
--compiler_jar "D:softwareclosure compilercompiler.jar" ^
--output_mode compiled ^
--compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" ^
--compiler_flags="--formatting=PRETTY_PRINT" ^
--output_file D:projectsoundballcompiledoundball.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可以在你下载(和提取)闭包编译器的地方找到

            The file compiler.jar can be found where you downloaded (and extracted) closure compiler

            现在，当您运行 compile.bat 并打开 D:projectsoundballcompiledoundball.html 时，您将在浏览器的开发人员工具中看到仅加载了 roundball.js.

            Now when you run the compile.bat and open D:projectsoundballcompiledoundball.html you'll see in the developer tools of your browser that only roundball.js is loaded.

            推荐答案

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

            The answer is in the question because it's a howto article that could help someone (like me in the future when I forgot how to do it).

相关文章