Javascript RequireJS：加载模块，包括模板和 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7917639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
RequireJS: Loading modules including templates and CSS
提问by fbrandel
After playing around with AMD/RequireJS I was wondering if it is a good idea to load UI modules including templates and CSS so they are completely independent from the web page.
在玩过 AMD/RequireJS 之后，我想知道加载 UI 模块（包括模板和 CSS）是否是一个好主意，以便它们完全独立于网页。
It sounds like good, but I haven't seen this implemented in the wild so there may be pitfalls.
这听起来不错，但我还没有看到它在野外实现，所以可能存在陷阱。
Think of some UI module with the following structure:
想想一些具有以下结构的 UI 模块：
myWidget
|--img
|--main.js
|--styles.css
+--template.tpl
All stuff in one folder. Looks very nice.
所有东西都在一个文件夹中。看起来很不错。
The module in main.js would look something like this:
main.js 中的模块看起来像这样：
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);
}
}
}
});
Questions are now:
现在的问题是：
- Am I missing something?
- Are there any plugins/concepts how to achieve this in a "standard" way?
- Is the RequireJS optimizer able to handle the CSS part here, say concat/minify the stylesheets like it does with the JS parts?
- Any opinions on that? Good or bad?
- 我错过了什么吗？
- 是否有任何插件/概念如何以“标准”方式实现这一目标？
- RequireJS 优化器是否能够处理这里的 CSS 部分，比如像处理 JS 部分那样连接/缩小样式表？
- 对此有何意见？是好是坏？
采纳答案by Chris Biscardi
You can specify the template as a dependency using the text! module like you have shown. I do this with Mustache Templates.
您可以使用文本将模板指定为依赖项！像你展示的那样的模块。我用 Mustache 模板来做到这一点。
However Require.js does not explicitly support css files.
但是 Require.js 并没有明确支持 css 文件。
Here is the official explanation, it's explained pretty well: http://requirejs.org/docs/faq-advanced.html#css
这是官方的解释，解释得很好：http: //requirejs.org/docs/faq-advanced.html#css
Edit: Feb 2012.
编辑：2012 年 2 月。
Templates such as handlebars can also be precompiled and included just like any other JS module http://handlebarsjs.com/precompilation.html
像把手这样的模板也可以像任何其他 JS 模块一样被预编译和包含 http://handlebarsjs.com/precompilation.html
Edit: August 2015
编辑：2015 年 8 月
If you're after this sort of modularization you should look into webpackand specifically css-loader. I'm using it to pair .css files with .jsx files as a unified "module" and extract the relevant CSS into a single stylesheet at build time.
如果你追求这种模块化，你应该研究webpack，特别是css-loader。我使用它来将 .css 文件与 .jsx 文件配对为一个统一的“模块”，并在构建时将相关的 CSS 提取到单个样式表中。
回答by Chad Johnson
There is a third-party CSS plugin for RequireJS which seems to work well: https://github.com/VIISON/RequireCSS/.
RequireJS 有一个第三方 CSS 插件，它似乎运行良好：https: //github.com/VIISON/RequireCSS/。
