RequireJS: Laden von Modulen einschließlich Vorlagen und CSS [geschlossen]

Nachdem ich mit AMD / RequireJS herumgespielt hatte, fragte ich mich, ob es eine gute Idee ist, UI-Module einschließlich Vorlagen und CSS zu laden, damit sie völlig unabhängig von der Webseite sind.

Es klingt gut, aber ich habe nicht gesehen, dass dies in freier Wildbahn implementiert wurde, so dass es Fallstricke geben kann.

Stellen Sie sich ein UI-Modul mit folgender Struktur vor:

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

Alles in einem Ordner. Sieht sehr gut aus.

Das Modul in main.js würde ungefähr so ​​aussehen:

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);
            } 
        }
    }
});

Fragen sind jetzt:

1. Vermisse ich etwas
2. Gibt es Plugins / Konzepte, wie dies auf "Standard" Weise erreicht werden kann?
3. Kann das RequireJS-Optimierungsprogramm den CSS-Teil hier verarbeiten, z. B. die Stylesheets wie bei den JS-Teilen verketten / minimieren?
4. Irgendwelche Meinungen dazu? Gut oder schlecht?

Sie können die Vorlage anhand des Textes als Abhängigkeit angeben! Modul wie Sie gezeigt haben. Ich mache das mit Moustache Templates.

Require.js unterstützt CSS-Dateien jedoch nicht explizit.

Hier ist die offizielle Erklärung, die ziemlich gut erklärt wird: http://requirejs.org/docs/faq-advanced.html#css

Bearbeiten: Februar 2012.

Vorlagen wie der Lenker können wie jedes andere JS-Modul http://handlebarsjs.com/precompilation.html auch vorkompiliert und enthalten werden

Bearbeiten: August 2015

Wenn Sie nach dieser Art der Modularisierung suchen, sollten Sie sich mit Webpack und speziell mit CSS-Loader befassen . Ich verwende es, um CSS-Dateien mit JSX-Dateien als einheitliches "Modul" zu koppeln und das relevante CSS zur Erstellungszeit in ein einzelnes Stylesheet zu extrahieren.

Es gibt ein CSS-Plugin eines Drittanbieters für RequireJS, das anscheinend gut funktioniert: https://github.com/VIISON/RequireCSS/ .