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

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

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

подумайте о каком-нибудь модуле пользовательского интерфейса со следующей структурой:

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

все вещи в одну папку. Выглядит очень мило.

модуль в главном.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);
            } 
        }
    }
});

вопросы:

  1. я что-то пропустила?
  2. есть ли какие-либо плагины / концепции, как достичь этого "стандартным" способом?
  3. является ли оптимизатор RequireJS способным обрабатывать часть CSS здесь, скажем, concat / minify таблицы стилей, как это происходит с частями JS?
  4. какие-нибудь мнения по этому поводу? Хорошо это или плохо?
2 70
javascript css requirejs js-amd

2 ответа:

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

Требуют.js явно не поддерживает файлы css.

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

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

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

Редактировать: Август 2015

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

50

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

6