Pull to refresh

Сборка клиентских JavaScript шаблонов

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

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

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

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


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

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

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


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

$ npm install -g jsttojs

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

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

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

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

Вы можете без особого труда написать обертку для удобной работы с шаблонами, например с hogan.js это будет выглядеть примерно так:

var Template = {
  render: function(name, data) {
    var template = Hogan.compile(MyGlobalVariable[name]);
    return template.render(data);
  },
  compile: function(name) {
    return Hogan.compile(MyGlobalVariable[name]);
  }
}

И использовать

var html = Template.render('video/index', { username: 'World' });

Примеры


Шаблоны:

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

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

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

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

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

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


Заключение


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

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

Ссылки


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


Upd


Если вам нужна «честная» компиляции на сервере, то посмотрите в сторону handlebars, но помните, что размер ваших шаблонов значительно увеличится (подробнее в комментариях). Но в первую очередь jsttojs предназначено для шаблонизаторов не имеющих встроенной серверной перекомпиляции, хоть и не исключает использования вместе с ними.
Tags:
Hubs:
+12
Comments 25
Comments Comments 25

Articles