Прекомпиляция клиентских JavaScript шаблонов

Я много пишу на JavaScript, и если вам при работе с шаблонами, как и мне, надоело экранировать окончание строк, следить за именами шаблонов и собирать их перед каждым билдом, это решение для вас, jsttojs — утилита для прекомпиляции клиентских шаблонов в JavaScript.

Первой мыслью было «загуглить», после непродолжительных поисков стало ясно, что ничего подходящего нет. Есть handlebars.js, но количество кода который он генерирует оставляет желать лучшего, выигрыш кажется сомнительным. Конечно же есть замечательный Google Closure Tools, но это законченное решение завязанное на инфраструктуре Closure Tools, что для нас не подходит. Было принято решение написать свою утилиту, в качестве языка для консистентности был выбран JavaScript.

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

Область применения

Это инструмент не привязанный к какому либо конкретному шаблонизатору, вы можете использовать свое любимое решение, например mustache, underscore.js, или ваш собственный, самый лучший фреймворк.

Так как скрипт запускается из консоли, при желании можно интегрироваться в любую систему сборки проекта, например в grunt с помощью grunt-shell.

Использование

Установка производится с помощью стандартного пакетного менеджера npm:

$ npm install -g jsttojs 

Доступны следующие параметры:

-h, --help           справка по использованию -V, --version        версия  -e, --ext <n>        имя расширения для шаблонов, по умолчанию jst -n, --name <n>       имя глобальной переменной для хранения шаблонов, по умолчанию JSTmpl -w, --watch          отслеживать изменения файлов в фоне и собирать шаблоны автоматически 

$ jsttojs templates compiled/templates/index.js --ext mustache --watch

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

Примеры

Шаблоны:

// tamplates/index.jst Hello world {{ username }} second line 

// tamplates/video/index.jst Hello {{ username }} on index video page Run precompile templates 

Выполняем команду:

$ jsttojs templates compiled/templates/index.js --name MyGlobalVariable 

И получаем шаблоны готовые к использованию:

// compiled/templates/index.js window.MyGlobalVariable = {   "index" : "Hello world {{ username }} second line",   "video/index" : "Hello {{ username }} on index video page" } 

Заключение

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

Код доступен на github

Ссылки

Так же можно посмотреть в сторону

• handlebars
• Closure Tools
• jquery-tmpl-jst