link - RequireJS: carga de módulos, incluidas plantillas y CSS

style html

Question

Después de jugar con AMD / RequireJS, me preguntaba si es una buena idea cargar módulos de UI, incluidas plantillas y CSS, para que sean completamente independientes de la página web.

Suena bien, pero no he visto esto implementado en la naturaleza, por lo que puede haber peligros.

Piensa en algún módulo de UI con la siguiente estructura:

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

Todo en una carpeta Se ve muy bien.

El módulo en main.js se vería así:

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

Las preguntas son ahora:

1. ¿Me estoy perdiendo de algo?
2. ¿Hay algún complemento / concepto de cómo lograr esto de una manera "estándar"?
3. ¿Es el optimizador RequireJS capaz de manejar la parte CSS aquí, decir concat / minify las hojas de estilo como lo hace con las partes JS?
4. ¿Alguna opinión sobre eso? ¿Bueno o malo?

Answer 1

¡Puedes especificar la plantilla como una dependencia usando el texto! módulo como el que has mostrado Lo hago con plantillas de bigote.

Sin embargo, Require.js no admite explícitamente archivos css.

Aquí está la explicación oficial, se explica bastante bien: http://requirejs.org/docs/faq-advanced.html#css

Edición: feb 2012

Las plantillas como los manubrios también se pueden precompilar e incluir como cualquier otro módulo de JS http://handlebarsjs.com/precompilation.html

Edición: agosto de 2015

Si busca este tipo de modularización, debe buscar en el webpack y específicamente css-loader . Lo estoy usando para vincular archivos .css con archivos .jsx como un "módulo" unificado y extraer el CSS relevante en una única hoja de estilo en tiempo de compilación.

Answer 2

Existe un complemento de CSS de terceros para RequireJS que parece funcionar bien: https://github.com/VIISON/RequireCSS/ .