在完成我的应用程序的构建文件的实现之后
我发现为什么这有效。
HTML
从文件系统读取文件并将其内容添加到全局模板对象中，例如，
== myapp.html ==
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
结果如下 JS 代码：
Template.body.addContent((function () {
var view = this;
return [
HTML.Raw("<h1>Welcome to Meteor!</h1>\n\n "),
Spacebars.include(view.lookupTemplate("hello"))
];
}));
它被包装在一个函数中，以文件名作为关键：
"myapp.html": function (require, exports, module) {
Template.body.addContent((function () {
var view = this;
return [
HTML.Raw("<h1>Welcome to Meteor!</h1>\n\n "),
Spacebars.include(view.lookupTemplate("hello"))];
}));
Meteor.startup(Template.body.renderToDocument);
Template.__checkName("hello");
Template["hello"] = new Template("Template.hello", (
function () {
var view = this;
return [
HTML.Raw("<button>Click Me</button>\n "),
HTML.P("You've pressed the button ",
Blaze.View("lookup:counter",
function () {
return Spacebars.mustache(view.lookup("counter"));
}), " times.")
];
}));
},
所以我们所有的 HTML 现在都是纯 JS 代码，将通过使用包含require像任何其他模块一样。
CSS
这些文件也是从文件系统读取的，它们的内容也嵌入在 JS 函数中，例如
== myapp.css ==
/* CSS declarations go here */
body {
background-color: lightblue;
}
转变为：
"myapp.css": ["meteor/modules", function (require, exports, module) {
module.exports = require("meteor/modules").addStyles("/* CSS declarations go here */\n\nbody {\n background-color: lightblue;\n}\n");
}]
所以我们所有的 CSS 现在也是一个 JS 模块，稍后使用require.
结论
所有文件都以一种或另一种方式转换为 JS 模块，这些模块遵循类似的规则包含为 AMD/CommonJS 模块。
如果另一个模块引用它们，它们将被包含/捆绑。而且由于全部都转化为JS代码
欺骗性语法背后并没有什么魔力：
import '../imports/hello/myapp.html';
import '../imports/hello/myapp.css';
它们都被转译为它们的等价形式require一旦资产已转换为 JS 模块。
而将静态资产放置在imports官方文档中没有提到目录，
这种导入静态资源的方式是有效的。
这似乎是 Meteor 工作原理的核心，所以我敢打赌这个功能将会存在很长一段时间。
我不知道是否可以将其称为功能，也许更合适的描述是意想不到的结果，但这会
仅从用户的角度来看才是正确的，我假设编写代码的人理解这种情况会发生，甚至可能
故意这样设计的。
