Я много пишу на 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
Ссылки
Так же можно посмотреть в сторону
Автор: Upward
