在Meteor项目中将ES6`import`与CSS/HTML文件一起使用:是错误还是功能? [英] Using ES6 `import` with CSS/HTML files in Meteor project: bug or feature?
问题描述
我目前正在学习流星，并且发现了一些令我着迷的东西.
I am currently learning Meteor and I found out something that intrigued me.
我可以使用import语句从JS文件加载HTML和CSS资产.
I can load HTML and CSS assets from a JS file using the import statement.
import '../imports/hello/myapp.html';
import '../imports/hello/myapp.css';
import * as myApp from '../imports/hello/myapp.js';
这让我感到惊讶，因此我跑到Google，但是找不到ES6 import规范或Meteor的文档中记录的这种行为.
This was a surprise to me so I ran to google but could not find this behavior documented in the specification for ES6 import or in Meteor's Docs.
所以我的问题是:
- 我可以依靠这种行为来构建我的应用程序吗?
- Meteor修复它时，我的应用程序会损坏吗?(如果是错误的话)?
注释
- 我正在使用Meteor v1.3，不确定是否也适用于以前的版本.
- 您可以从 Github 下载该应用程序以查看此行为.
- I am using Meteor v1.3, not sure if this works also with previous versions.
- You can download the app to see this behavior from Github
推荐答案
在为我的应用程序完成构建文件的实现之后 我知道了为什么这样.
After going through the implementation of the built files for my app I found out why this works.
HTML
从文件系统中读取文件，并将其内容添加到全局模板对象中，例如
Files are read from the file system and their contents added to the global Template object, e.g.,
== 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"))
];
}));
其中包裹了一个以文件名作为键的函数:
Which is wrapped in a function with the name of the file as it's key:
"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将其包含在内.
So all of our HTML is now pure JS code which will be included by using require like any other module.
CSS
还从文件系统中读取文件，并且文件的内容也嵌入到JS函数中，例如
The files are also read from the file system and their contents are embedded also in JS functions, e.g.
== 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再次导入.
So all of our CSS is also now a JS module that's again imported later on by using require.
结论
所有文件都以一种或另一种方式转换为JS模块，该模块遵循与AMD/CommonJS模块相似的规则. 如果另一个模块引用了它们，它们将被包含/捆绑在一起.而且由于所有这些都已转换为JS代码 欺骗性的语法背后没有魔术:
All files are in one way or another converted to JS modules that follow similar rules for inclusion as AMD/CommonJS modules. They will be included/bundled if another module refers to them. And since all of them are transformed to JS code there's no magic behind the deceitful syntax:
import '../imports/hello/myapp.html';
import '../imports/hello/myapp.css';
一旦资产已转换为JS模块，它们都会使用require转换为等效形式.
They both are transpiled to their equivalent forms with require once the assets have been transformed to JS modules.
尽管官方文档中未提及将静态资产放置在
Whereas the approach of placing static assets in the imports directory is not mentioned in the official documentation,
this way of importing static assets works.
这似乎是Meteor运作方式的核心，因此我敢打赌，此功能将存在很长一段时间.
This seems to be at the core of how Meteor works so I'd bet this functionality is going to be there for a long while.
我不知道是否将此功能称为功能，也许更恰当的描述是意料之外的结果，但这会 仅从用户的角度来看是正确的，我认为编写代码的人都知道会发生这种情况，甚至 这样设计的目的.
I don't know if to call this a feature maybe a more appropriate description is unexpected consequence but that would only be true from the user's perspective, I assume the people who wrote the code understood this would happen and perhaps even designed it purposely this way.
这篇关于在Meteor项目中将ES6`import`与CSS/HTML文件一起使用:是错误还是功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
