Lime

Lime

关注
发信
关注(28)粉丝(399)

WIKI：如何使用Lime（如何使用闭包编译器与第三方（闭包）库）

本文介绍了WIKI：如何使用Lime（如何使用闭包编译器与第三方（闭包）库）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以下帖子启发我看看limeJS，作为一个侧面项目，我正在和一个Yatzee游戏（大多是关闭），并认为这可能是一个很好的图书馆使用。



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



对于其他有google-closuse的初学者，我已经写了这个教程。



请注意，jQuery可以由你的闭包编译代码使用，您需要使用jQuery 。你不能将jQuery编译成你的代码，闭包库里有一个穿戴好的dojo，可以在third_party中找到。使用时可以将代码编译成一个文件。



您需要什么：




  1. Python

  2. Git客户端

  3. ，像jQuery和jQuery ui，但可以与您的代码一起编译

  4. Python（我使用2.7） li>
  5. LimeJS作为第三方库（使用git客户端获取它，url：）

  6. 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：

    • 项目

      • 库

        • goog



          • 动画

          • 音频

          • css

          • ...


        • third_party

          • 关闭

            • ...




      • 圆球

        • 资产

        • ...其他圆球东西






      cacldeps .py



      当您打开D：\projects\roundball\rb.html并查看控制台（在Chrome或FireFox中按F12键，最好具有firebug插件安装），你会看到一个错误：ReferenceError：goog没有定义



      打开D：\projects\roundball\\ \\ rb.html并更改：

       < script type =text / javascriptsrc =../../ ../closure/closure/goog/base.js\"></script>

      至

       < script type =text / javascriptsrc =../ libraries / goog / base.js>< / script>

      现在，当您再次打开rb.html时，会收到一个不同的错误：goog。要求找不到：lime.Director



      这是因为关闭使用deps.js来查找依赖关系，并且由于石灰不在那里，它不能找到它。幸运的是，我们有一个名为calcdeps.py的工具，在封闭库的bin目录中，可以为我们创建此文件。它会查看您的代码，并使用goog.require来确定需要什么其他文件。如果你的文件结构比这个工具好，可以找到它。



      它将期望Director在一个名为director.js的文件中，名为lime（并且它是）。该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\ ^ 
        - 输入D：\projects\roundball\rb.js ^ 
       --output_mode deps ^ 
       --output_file D：\projects\libraries\goog\deps.js 
      暂停

      未编译的代码使用/goog/deps.js加载依赖关系。 caclcdeps.py将检查您的代码，从rb.js开始（因为这是代码的起点），并根据项目使用的内容向deps.j添加条目。



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



      请注意，当您有另一个项目时;假设D：\projects\project2，那么您必须在该项目目录中创建一个makedeps.bat，以便在运行未编译的代码之前为您创建deps.js。这是因为多个项目共享一个google关闭库，所以当您切换项目时，请确保在运行未编译的代码之前先构建deps.js。



      解决缺少的依赖关系



      打开rt.html，我们仍然会收到一个错误，但是出现了一个错误：lime.css的未定义的名称ToPath



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



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

      整个事情是未编译的，您可以设置断点进入第三方代码。



      编译代码



      在生产中，您需要将代码编译成一个文件。要编译代码，我在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\ ^ ^ 
        - 输入D：\projects\roundball\rb.js ^ 
       --compiler_jarD：\software\closure compiler\compiler.jar^ 
       --output_mode已编译^ 
       --compiler_flags = -  compilation_level = ADVANCED_OPTIMIZATIONS^ 
       --compiler_flags = -  formatting = PRETTY_PRINT^ 
       --output_file D：\projects\roundball\compiled\roundball.js 
      暂停
       
      ;需要这个标志进行编译：
      ;  -  compiler_flags = -  define goog.DEBUG = false^ 
      ;从生产编译中删除以下标志：
      ;  -  compiler_flags = -  formatting = PRETTY_PRINT^ 
      ; lime libr白羊座给我错误更严格的汇编
      ;所以不得不删除这个标志（必须修复错误或没有类型检查你的代码）
      ;  -  compiler_flags = -  warning_level = VERBOSE^ 
              pre> 
       
       
      文件compile.jar可以在你下载（并提取）关闭编译器的位置找到
       
       
       
      您运行compile.bat并打开D：\projects\roundball\compiled\roundball.html您将在浏览器的开发人员工具中看到，只有加载了roundball.js。
      解决方案
      答案是在这个问题，因为这是一篇文章，可以帮助某人（像我以后，当我忘记了如何做） p> 
      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.
      


      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.
      


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


      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.
      


      What you need:
      


        

      1. Python 
        2. 

      2. Git client
        3. 

      3. Closure compiler for compiling code (minifying and merging all files into one) 
        4. 

      4. Closure library like jQuery and jQuery ui but can be compiled along with your code 
        5. 

      5. Python (I use 2.7)
        6. 

      6. LimeJS As a 3rd party library (use git client to get it, the url:https://github.com/digitalfruit/limejs.git)
        7. 

      7. JAVA JRE 
        8. 

      


      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.
      


      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.
      


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


      Next I'll use an existing project from the limeJS library, copy the [lime clone dir]\lime\demos\roundball to D:\projects\roundball
      


      At this time your directory structure should look like this:
      


        

      • D:

          

        • projects

            

          • libraries

              

            • goog
              • 

            • lime

                

              • animation
                • 

              • audio
                • 

              • css
                • 

              • ...
                • 

              • 

            • third_party

                

              • closure

                  

                • ...
                  • 

                • 

              • 

            • 

          • roundball

              

            • assets
              • 

            • ... other roundball stuff
              • 

            • 

          • 

        • 

      


      cacldeps.py
      


      When you open D:\projects\roundball\rb.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"
      


      Open up D:\projects\roundball\rb.html and change:
      <script type="text/javascript" src="../../../closure/closure/goog/base.js"></script>

      to
      <script type="text/javascript" src="../libraries/goog/base.js"></script>

      Now when you open up rb.html again you get a different error: "goog.require could not find: lime.Director"
      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.
      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.
      You can add directories for calcdeps.py to look in with the --path parameter.
      In D:\projects\roundball I'll create a makedeps.bat with the following content:
      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

      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.
      Once again, cacldeps.py can be found in the bin directory of closure library. 
      Note that when you have another project; let's say D:\projects\project2 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.
      Resolving missing dependency
      Opening the rt.html we still get an error but a different one: Error: "Undefined nameToPath for lime.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:\projects\libraries\lime 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. 
      Copy the css directory to D:\projects\libraries\lime and run makedeps.bat again, now when you open rt.html it will run.
      The whole thing is uncompiled and you can set breakpoints to step into 3rd party code.
      Compile your code
      In production you would want to compile the code to one file. To compile the code I created a compile.bat in D:\projects\roundball with the following content:
      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" ^

      The file compiler.jar can be found where you downloaded (and extracted) closure compiler
      Now when you run the compile.bat and open D:\projects\roundball\compiled\roundball.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).
                              
      这篇关于WIKI：如何使用Lime（如何使用闭包编译器与第三方（闭包）库）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
    • 09-13 13:56
    Powered by LMLPHP ©2024 Lime 0.033199