RequireJS: laden van modules inclusief sjablonen en CSS

Na het spelen met AMD/RequireJS vroeg ik me af of het een goed idee is om UI-modules te laden, inclusief sjablonen en CSS, zodat ze volledig onafhankelijk zijn van de webpagina.

Het klinkt als goed, maar ik heb dit niet geïmplementeerd in het wild gezien, dus er kunnen valkuilen zijn.

Denk aan een bepaalde UI-module met de volgende structuur:

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

Alle spullen in één map. Ziet er heel goed uit.

De module in main.js ziet er ongeveer zo uit:

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

Vragen zijn nu:

  1. Mis ik iets?
  2. Zijn er plug-ins/concepten om dit op een "standaard" manier te bereiken?
  3. Is de RequireJS optimizer in staat om het CSS-gedeelte hier af te handelen, bijvoorbeeld concat/minify de stylesheets zoals het doet met de JS-onderdelen?
  4. Enige mening daarover? Goed of slecht?
69
ik doe dit voor sjablonen en het werkt geweldig. De enige worsteling die ik had was met CSS, waar ik de optimalisatie niet kon laten werken. Het zou me een cryptische fout geven en ik had geen tijd om het op te lossen. Het staat momenteel op mijn lijst met dingen die ik wil oplossen, dus ik zal je vraag in de gaten houden om te zien of iemand een oplossing heeft
toegevoegd de auteur timDunham, de bron

2 antwoord

U kunt de sjabloon opgeven als een afhankelijkheid met behulp van de tekst! module zoals je hebt getoond. Ik doe dit met Moustache-sjablonen.

Require.js ondersteunt echter niet expliciet css-bestanden.

Here is the official explanation, it's explained pretty well: http://requirejs.org/docs/faq-advanced.html#css

Wijzigen: feb 2012.

Templates such as handlebars can also be precompiled and included just like any other JS module http://handlebarsjs.com/precompilation.html

Wijzigen: augustus 2015

Als u op zoek bent naar dit soort modularisering, moet u webpack en specifiek css-loader . Ik gebruik het om .css-bestanden te koppelen met .jsx-bestanden als een uniforme "module" en extraheren de relevante CSS in een enkel stylesheet tijdens de build-tijd.

50
toegevoegd
Wat is de "juiste" manier om met CSS om te gaan?
toegevoegd de auteur hugomg, de bron
Ja, ik weet dat er veel alternatieven zijn. Het verbaast me nog steeds dat we een standaardsysteem voor JS-modules hebben, maar als het op CSS aankomt, zijn we terug in het Wilde Westen.
toegevoegd de auteur hugomg, de bron
Ik denk dat ik niet begrijp waarom CSS niet door de tekst kan worden geladen! inpluggen? is niet alleen CSS utf8-tekst?
toegevoegd de auteur Alexander Mills, de bron
AFAIK er is geen "juiste" manier. uw opties zijn: 1) traditionele link-tag 2) dynamisch inclusief de stylesheet met behulp van javascript. Als uw JavaScript afhankelijk is van uw CSS en u het dynamisch wilt laden, moet u een functie maken om te testen op het bestaan ​​van een attribuut uit de geladen CSS-klasse voordat uw JavaScript-widget wordt uitgevoerd.
toegevoegd de auteur Chris Biscardi, de bron
je zou ook CSS via de tekst kunnen laden! module en ontleed het, hoewel ik dit nog nooit heb gedaan.
toegevoegd de auteur Chris Biscardi, de bron
U kunt yesnope.js gebruiken om css-bestanden te laden via de functie injectCSS
toegevoegd de auteur Saleh, de bron

Er is een CSS-plug-in van derden voor RequireJS die goed lijkt te werken: https://github.com/VIISON/ RequireCSS/.

6
toegevoegd
beter gebruik deze, die de r.js optimizer ondersteunt github.com/guybedford/require-css/ kwesties
toegevoegd de auteur Offirmo, de bron
Hoewel de plug-in erg oud is, werkt deze nog steeds goed in 2015.
toegevoegd de auteur budhajeewa, de bron