Question

ES6的模块基于灵活的加载器架构（虽然标准不是最终的，所以......）。

这是否意味着基于system.js的ES6加载器可以加载所有资产？即CSS，HTML，图像，文本，......任何类型的文件？

我问，因为我开始使用WebComponents＆amp;具有自己的HTML导入的聚合物，并使用ES6实现它们，ES6具有自己的导入/加载器（system.js）。

Answer 1

如果您使用SystemJS，则可以使用plugins加载资产：

// Will generate a <link> element for my/file.css
System.import('my/file.css!')
    .then(() => console.log('CSS file loaded'));

或者，您可以使用import语句。这将确保在脚本执行之前加载CSS文件：

import 'my/file.css!';

最后，您可以使用text plugin：

检索文件的内容

import cssContent from 'my/file.css!text';
console.log('CSS file contents: ', cssContent);

另一种选择是将css添加为JSPM配置文件中的依赖项。基本上在特定包.json文件中添加依赖项，然后运行＆＃39; jspm install＆＃39;这将把覆盖添加到package.js＆amp; jspm.config.js

Answer 2

我知道你提到了ES6模块，但是因为它本身似乎不支持CSS，如果你正在寻找基于标准的东西来动态加载资源并希望某些东西可能比{{1}更不愉快}，新的Fetch API可能会像这样使用：

XMLHttpRequest

使用异步功能更加清晰：

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

对于其他资源类型，您可以使用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)方法获取图像，使用待处理的ES6模块支持，使用blob()获取JavaScript等等。

es6的模块加载器也可以加载资产（html / css / ...）

2 个答案: