RequireJS : Chargement des modules, y compris les modèles et les CSS

Question

Après avoir joué avec AMD/RequireJS, je me suis demandé si c'était une bonne idée de charger les modules d'interface utilisateur, y compris les modèles et les CSS, de manière à ce qu'ils soient complètement indépendants de la page Web.

Cela semble être une bonne chose, mais je n'ai pas vu cette mise en œuvre dans la nature, il peut donc y avoir des écueils.

Pensez à un module d'interface utilisateur ayant la structure suivante :

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

Toutes les affaires dans un seul dossier. C'est très joli.

Le module dans main.js ressemblerait à quelque chose comme ceci :

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

Les questions sont maintenant :

1. Est-ce que j'ai manqué quelque chose ?
2. Existe-t-il des plugins/concepts permettant de réaliser cela de manière "standard" ?
3. L'optimiseur RequireJS est-il capable de gérer la partie CSS ici, disons concaténer/minifier les feuilles de style comme il le fait avec les parties JS ?
4. Des avis sur ce sujet ? Bon ou mauvais ?

Answer 1

Vous pouvez spécifier le modèle comme une dépendance en utilisant le module text ! comme vous l'avez montré. Je fais cela avec Mustache Templates.

Toutefois, Require.js ne prend pas explicitement en charge les fichiers css.

Voici l'explication officielle, elle est assez bien expliquée : http://requirejs.org/docs/faq-advanced.html#css

Edit : Feb 2012.

Les modèles tels que le guidon peuvent également être précompilés et inclus comme tout autre module JS http://handlebarsjs.com/precompilation.html

Edition : août 2015

Si vous êtes à la recherche de ce type de modularisation, vous devriez vous pencher sur les points suivants webpack et plus particulièrement css-loader . Je l'utilise pour associer des fichiers .css à des fichiers .jsx sous la forme d'un "module" unifié et extraire les CSS pertinents dans une feuille de style unique au moment de la construction.

Answer 2

Il existe un plugin CSS tiers pour RequireJS qui semble bien fonctionner : https://github.com/VIISON/RequireCSS/ .

Answer 3

Jetez un coup d'oeil ici, c'est un plugin bien testé et documenté pour RequireJs, Vous y trouverez également la description des problèmes qu'il résout lorsqu'on travaille avec des dépendances css. Il faut dire que je l'utilise en production. https://github.com/dimaxweb/CSSLoader