Сборка модулей

Google Closure Compiler умеет собирать javascript не в виде одного большого файла, а в виде нескольких модулей.

Так что все страницы могут грузить только один модуль, а дополнительная функциональность - загружаться лишь там, где она нужна.

Для такой сборки используется флаг компилятора --module.

Пример сборки

Например:

java -jar compiler.jar --js src1.js --js src2.js  --js src3.js --module
first:2 --module second:1:first

Создаст модули: first.js и second.js.

Первый модуль, который назван "first", создан из объединенного и оптимизированного кода двух файлов: src1.js и src2.js (первые два параметра --js).

Второй модуль, который назван "second", создан из src3.js - это следующий аргумент --js после включенных в первый модуль. Второй модуль зависит от первого.

Флаг --module second:1:first как раз и означает, что модуль second будет создан из одного файла после вошедших в предыдущий модуль (first) и зависит от модуля first.

Расширенный пример

Пусть у нас есть следующие файлы.

• main.js - основная библиотека
  

  my = {}
  my.main = function() {
  	alert('main')
  }
  

• hello.js - первый модуль
  

  my.hello = function() {
  	my.main()
  	alert('hello')
  }
  

• bye.js - второй модуль
  

  my.bye = function() {
  	my.main()
  	alert('bye')
  }
  

hello и bye зависят от main.

Следующая команда соберет три модуля: first.js - основой модуль из main.js, second и third - из hello.js и bye.js соответственно.

java -jar compiler.jar --js main.js --js hello.js --js bye.js --module first:1 --module second:1:first --module third:1:first --compilation_level ADVANCED_OPTIMIZATIONS

Результат:

• first.js
  

  my={};my.a=function(){alert("main")};
  

• second.js
  

  my.c=function(){my.a();alert("hello")};
  

• third.js
  

  my.b=function(){my.a();alert("bye")};
  

Этот пример демонстрирует самую важную фичу модулей, ради которой они и задумывались - сохранение связности переменованных переменных.

В частности - обратим внимание, функция my.main (main.js) была переименована в my.a, и именно в таком виде она вызывается в модулях second.js и third.js.

Разумеется, вы можете использовать много файлов для каждого из модулей.

Перечислять файлы --js нужно в том же порядке, в котором они зависят друг от друга.

Директива --module обрабатывается, буквально, так:

--module first:1

Создать модуль first из первого файла в списке.

--module second:1:first

Взять следующий 1 файл из списка и создать из него модуль second, зависящий от first.

--module third:1:first

Взять еще 1 файл из списка и создать из него модуль third, зависящий от first.

При этом зависимость одного модуля от другого означает, что все символы будут переименованы синхронно. Это особенно важно при продвинутой оптимизации.

Есть одно ограничение - разные модули не могут содержать одни и те же файлы. То есть, не получится сделать два модуля, первый из которых включает в себя A.js и B.js, а второй - снова (нельзя) A.js и C.js.

Если вы используете goog.provide/require - компилятор при сборке обработает их и проверит все зависимости.

Как правило, такая сборка осуществляется утилитой calcdeps и описана в статье Система сборки и зависимостей Google Closure Library.

Вспомогательные флаги

Флаг --module - основной, но есть еще несколько дополнительных.

--module_output_path_prefix

Префикс для имен файлов для откомпилированных модулей, может включать в себя директорию. По умолчанию: ./

--module_wrapper

Необязательный текст до или после модуля. Строка, в которой вместо текста модуля будет %s. Например:

--module_wrapper "/* copyright 2009-2010 */ %s"

Резюме

Сборка модулей очень полезна, если некоторые из ваших страниц используют большое количество специфического javascript.

Например, у меня это страницы со сложными интерфейсами, такими что грузить их везде - совсем-совсем некошер. Думаю, что-то такое есть и у вас. Google Closure Compiler позволяет решить эту проблему.

Быстрых всем страничек