RequireJS:加载模块,包括模板和CSS

Question

在玩了AMD/RequireJS后,我想知道加载包含模板和CSS的UI模块是否是一个好主意,这样它们就完全独立于网页.

这听起来不错,但我没有看到这在野外实施,所以可能存在陷阱.

想想一些具有以下结构的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);
            } 
        }
    }
});

现在的问题是:

1. 我错过了什么吗？
2. 是否有任何插件/概念如何以"标准"方式实现？
3. RequireJS优化器是否能够在这里处理CSS部分,比如使用JS部件对样式表进行concat/minify处理？
4. 有什么意见吗？是好是坏？

Answer 1

您可以使用文本将模板指定为依赖项!你所展示的模块.我使用Mustache模板执行此操作.

但是,Require.js不明确支持css文件.

这是官方解释,它解释得很好:http: //requirejs.org/docs/faq-advanced.html#css

编辑:2012年2月.

诸如把手之类的模板也可以像任何其他JS模块一样进行预编译和包含 http://handlebarsjs.com/precompilation.html

编辑:2015年8月

如果你正在进行这种模块化,你应该研究webpack,特别是css-loader.我正在使用它将.css文件与.jsx文件配对作为统一的"模块",并在构建时将相关的CSS提取到单个样式表中.

Answer 2

RequireJS有一个第三方CSS插件似乎运行良好:https://github.com/VIISON/RequireCSS/.