es6的模块加载器也可以加载assets(html/css/...)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24923479/
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
Can es6's module loader also load assets (html/css/...)
提问by backspaces
ES6's modules are based on a flexible loader architecture (although the standard is not final, so ...).
ES6 的模块基于灵活的加载器架构（虽然标准不是最终的，所以......）。
Does this mean ES6's loader, based on system.js, can load allassets? I.e. CSS, HTML, Images, Text, .. files of any sort?
这是否意味着基于 system.js 的 ES6 加载器可以加载所有资产？即 CSS、HTML、图像、文本、.. 任何类型的文件？
I ask because I'm starting to use WebComponents & Polymer which have their own HTML import, and implementing them with ES6, which has its own import/loader (system.js).
我问是因为我开始使用具有自己的 HTML 导入的 WebComponents 和 Polymer，并使用具有自己的导入/加载器 (system.js) 的 ES6 实现它们。
采纳答案by urish
If you use SystemJSthen you can load assets by using plugins:
// Will generate a <link> element for my/file.css
System.import('my/file.css!')
.then(() => console.log('CSS file loaded'));
Alternatively, you can use an importstatement. This will make sure that the CSS file is loaded before the your script executes:
或者，您可以使用import语句。这将确保在脚本执行之前加载 CSS 文件：
import 'my/file.css!';
Finally, you can retrieve the contents of the file using the text plugin:
import cssContent from 'my/file.css!text';
console.log('CSS file contents: ', cssContent);
Another option is to add the css as a dependency in JSPM config files. Basically adding the dependency in the specific package .json file and then running 'jspm install' which will add the override to package.js & jspm.config.js
另一种选择是将 css 添加为 JSPM 配置文件中的依赖项。基本上在特定的包 .json 文件中添加依赖项，然后运行“jspm install”，这会将覆盖添加到 package.js 和 jspm.config.js
回答by Brett Zamir
I know you mentioned ES6 modules, but as that does not appear to support CSS natively, if you're looking for something standards-based to load resources dynamically and wish for something possibly somewhat less unpleasant than XMLHttpRequest, the new Fetch APImight be used like this:
我知道你提到了 ES6 模块，但由于它似乎并不原生支持 CSS，如果你正在寻找基于标准的东西来动态加载资源并希望一些可能比 不那么令人不快的东西XMLHttpRequest，新的Fetch API可能会像这样使用这个：
var myStylesheets = ['myStyles1.css', 'myStyles2.css'];
Promise.all(myStylesheets.map(url => fetch(url))).
then(arr => Promise.all(arr.map(url => url.text()))).
then(arr => {
var style = document.createElement('style');
style.textContent = arr.reduce(
(prev, fileContents) => prev + fileContents, ''
);
document.head.appendChild(style);
}).then(() => {
// Do whatever now
});
This is even cleaner with async functions:
使用异步函数更干净：
var myStylesheets = ['myStyles1.css', 'myStyles2.css'];
async function loadStyles(stylesheets) {
let arr = await Promise.all(stylesheets.map(url => fetch(url)))
arr = await Promise.all(arr.map(url => url.text()))
const style = document.createElement('style')
style.textContent = arr.reduce(
(prev, fileContents) => prev + fileContents, ''
)
document.head.appendChild(style);
// Do whatever now
}
loadStyles(myStylesheets)
For other resource types, you can use the blob()method for images, and pending ES6 modules support, eval()for JavaScript, etc.
对于其他资源类型，您可以使用blob()用于图像的方法，以及未决的 ES6 模块支持，eval()用于 JavaScript 等。
