web-dev-qa-db-fra.com

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

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

Cela semble bon, mais je n'ai pas vu cela implémenté dans la nature, il peut donc y avoir des pièges.

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

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

Tous les trucs dans un dossier. Ça a l'air très sympa.

Le module dans main.js ressemblerait à 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. Suis-je en train de manquer quelque chose?
  2. Existe-t-il des plugins/concepts pour y parvenir de manière "standard"?
  3. L'optimiseur RequireJS est-il capable de gérer la partie CSS ici, disons concat/minifier les feuilles de style comme il le fait avec les parties JS?
  4. Des opinions là-dessus? Bon ou Mauvais?
cssrequirejsjavascriptjs-amd
72
fbrandel

Vous pouvez spécifier le modèle comme une dépendance en utilisant le texte! module comme vous l'avez montré. Je le fais avec des modèles de moustache.

Cependant, 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: fév 2012.

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

Edit: août 2015

Si vous recherchez ce type de modularisation, vous devriez regarder webpack et plus précisément css-loader . Je l'utilise pour coupler des fichiers .css avec des fichiers .jsx en tant que "module" unifié et extraire le CSS pertinent dans une seule feuille de style au moment de la construction.

52
Chris Biscardi

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

7
Chad Johnson