WIKI: Как использовать Lime (как использовать компилятор закрытия со сторонними (закрывающими) библиотеками)

Следующий пост вдохновил меня взглянуть на limeJS, как на побочный проект, над которым я работаю и заканчиваю игру Yatzee (в основном выключенной), и подумал, что это может быть хорошей библиотекой для использования.

Как новичок в google-closure, у меня были некоторые трудности с запуском некомпилированного кода и его компиляцией, в основном из-за незнания параметров и команд, а также из-за зависимостей.

Для других новичков с google-closuse я написал это руководство.

Обратите внимание, что jQuery может использоваться вашим скомпилированным кодом закрытия, но вам понадобится файл jQuery externs. Вы не можете скомпилировать jQuery в свой код, в библиотеке закрытия есть додзё, которое можно найти в third_party. Используя это, вы можете скомпилировать свой код в один файл.

Что вам нужно:

1. Python
2. Клиент Git
3. Closure compiler для компиляции кода (минимизация и объединение всех файлов в один)
4. Closure library, такая как jQuery и jQuery ui, но может быть скомпилирована вместе с вашим кодом.
5. Python (я использую 2.7)
6. LimeJS В качестве сторонней библиотеки (для ее получения используйте клиент git, URL-адрес: https://github.com/digitalfruit/limejs.git)
7. JAVA JRE

Структура каталогов

Я использую Windows и храню свои проекты в D: \ projects. Если у вас есть проекты где-то еще, вам нужно заменить ссылки D: \ projects на свои собственные.

В D: \ projects я создаю каталог с именем library, в этом каталоге я копирую каталоги goog и third_party из библиотеки закрытия (goog находится в каталоге закрытия), так как вы будете использовать их для многих проектов, я храню его в корне проектов, вы можете включите ее копию в каждый создаваемый вами проект, но в этом случае я буду использовать библиотеку для всех проектов.

Теперь я копирую содержимое каталога src из limeJS ([lime clone dir] \ lime \ src) в D: \ projects \ libraries \ lime (тот, который содержит подкаталоги, называемые animation, audio ...).

Затем я воспользуюсь существующим проектом из библиотеки limeJS, скопирую [каталог клонов Lime] \ lime \ demos \ roundball в D: \ projects \ roundball.

На этот раз ваша структура каталогов должна выглядеть так:

• D:
  • projects
    • libraries
      • goog
      • lime
        • animation
        • аудио
        • css
        • ...
      • third_party
        • closure
          • ...
    • roundball
      • assets
      • ... другие круглые мячи

cacldeps.py

Когда вы открываете D: \ projects \ roundball \ rb.html и проверяете консоль (нажмите F12 в Chrome или FireFox, желательно с установленным плагином firebug), вы увидите ошибку: «ReferenceError: goog не определен»

Откройте D: \ projects \ roundball \ rb.html и измените:

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

to

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

Теперь, когда вы снова открываете rb.html, вы получаете другую ошибку: «goog.require не может найти: lime.Director»

Это связано с тем, что закрытие использует deps.js для поиска зависимостей, и поскольку лайма там нет, он не может его найти. К счастью для нас, в каталоге bin библиотеки закрытия есть инструмент под названием calcdeps.py, который может создать для нас этот файл. Он будет искать в вашем коде и использовать goog.require, чтобы выяснить, какие еще файлы необходимы. Если у вас хорошая файловая структура, этот инструмент ее найдет.

Ожидается, что Директор находится в файле с именем Director.js в каталоге с именем Lime (и это так). В этом 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 в соответствии с тем, что использует ваш проект.

Еще раз, cacldeps.py можно найти в каталоге bin библиотеки закрытия.

Обратите внимание: когда у вас есть другой проект; скажем, D: \ projects \ project2, тогда вам нужно создать makedeps.bat в этом каталоге проекта, который повторно создает для вас deps.js, прежде чем вы сможете запустить некомпилированный код. Это связано с тем, что несколько проектов используют одну библиотеку закрытия Google, поэтому при переключении проектов убедитесь, что вы сначала создаете deps.js, прежде чем запускать свой некомпилированный код.

Устранение отсутствующей зависимости

Открывая rt.html, мы по-прежнему получаем ошибку, но другую: Ошибка: «Undefined nameToPath for lime.css»

Заглянув в goog / deps.js, мы обнаружим, что Lime.css нужен для Lime, но не имеет записи в deps.js. Почему это? Заглянув в D: \ projects \ libraries \ lime, нет каталога css или файла css.js. Но в каталоге, в котором вы клонировали проект git lime, есть каталог css.

Скопируйте каталог css в D: \ projects \ libraries \ lime и снова запустите makedeps.bat, теперь, когда вы откроете rt.html, он запустится.

Все это не скомпилировано, и вы можете установить точки останова для перехода в сторонний код.

Скомпилируйте свой код

На производстве вам нужно скомпилировать код в один файл. Для компиляции кода я создал compile.bat в D: \ projects \ roundball со следующим содержимым:

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.