RequireJS: загрузка модулей, включая шаблоны и CSS

После игры с AMD/RequireJS мне было интересно, стоит ли загружать модули пользовательского интерфейса, включая шаблоны и CSS, поэтому они полностью независимы от веб-страницы.

Звучит неплохо, но я не видел, как это реализовано в дикой природе, поэтому могут быть подводные камни.

Подумайте о некотором модуле UI со следующей структурой:

myWidget
    |--img 
    |--main.js
    |--styles.css
    +--template.tpl

Все материалы в одной папке. Выглядит очень хорошо.

Модуль в main.js будет выглядеть примерно так:

define(["TemplateEngine", "text!myWidget/template.tpl"], function(TemplateEngine, template) {

    // Load CSS (Pseudo Code)
    var cssUrl = "myWidget/styles.css";
    appendToHead(cssUrl);

    return function() {
        return {
            render: function(data) {
                  return TemplateEngine.toHtml(template, data);
            } 
        }
    }
});

Теперь вопросы:

  • Я что-то пропустил?
  • Есть ли какие-либо плагины/концепции, как добиться этого "стандартным" способом?
  • Может ли оптимизатор RequireJS обрабатывать часть CSS здесь, скажем, concat/minify таблицы стилей, как это делается с частями JS?
  • Любые мнения по этому поводу? Хорошо или плохо?

Ответы

Ответ 1

Вы можете указать шаблон как зависимость, используя текст! как вы показали. Я делаю это с помощью шаблонов Mustache.

Однако Require.js явно не поддерживает файлы css.

Вот официальное объяснение, это объясняется довольно хорошо: http://requirejs.org/docs/faq-advanced.html#css

Изменить: февраль 2012 г.

Шаблоны, такие как рули, также могут быть предварительно скомпилированы и включены так же, как и любой другой JS-модуль http://handlebarsjs.com/precompilation.html

Изменить: август 2015

Если вы после такого рода модуляции, вы должны изучить webpack и, в частности, css-loader. Я использую его для соединения файлов .css с .jsx файлами в виде единого "модуля" и извлечения соответствующего CSS в единую таблицу стилей во время сборки.

Ответ 2

Существует сторонний плагин CSS для RequireJS, который, кажется, работает хорошо: https://github.com/VIISON/RequireCSS/.