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

72

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?
css requirejs javascript js-amd fbrandel
quelle
Ich mache das für Vorlagen und es funktioniert großartig. Der einzige Kampf, den ich hatte, war mit CSS, wo ich die Optimierung nicht zum Laufen bringen konnte. Es würde mir einen kryptischen Fehler geben und ich hatte nicht die Zeit, ihn zu lösen. Es ist derzeit auf meiner Liste der Dinge, die zu lösen versucht werden, also werde ich Ihre Frage im Auge behalten, um zu sehen, ob jemand eine Lösung hat
timDunham

Antworten:

53

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.

Chris Biscardi
quelle
2
Was ist dann der "richtige" Weg, um mit CSS umzugehen?
Hugomg
AFAIK gibt es keinen "richtigen" Weg. Sie haben folgende Möglichkeiten: 1) traditionelles Link-Tag 2) dynamisches Einfügen des Stylesheets mithilfe von Javascript. Wenn Ihr Javascript von Ihrem CSS abhängt und Sie es dynamisch laden möchten, müssen Sie eine Funktion erstellen, um die Existenz eines Attributs aus der geladenen CSS-Klasse zu testen, bevor Ihr Javascript-Widget ausgeführt wird.
Chris Biscardi
Sie können CSS auch über den Text laden! Modul und analysieren Sie es, obwohl ich dies noch nie getan habe.
Chris Biscardi
29
Ja, ich weiß, dass es viele Alternativen gibt. Es nervt mich immer noch, dass wir ein Standardsystem für JS-Module haben, aber wenn es um CSS geht, sind wir zurück im wilden Westen.
Hugomg
1
Ich glaube, ich verstehe nicht, warum CSS nicht vom Text geladen werden kann! Plugin? Ist CSS nicht nur utf8-Text?
Alexander Mills