ES6的模块加载器也能加载资产吗（html/css/...）答案

【问题标题】：Can ES6's module loader also load assets (html/css/...)ES6的模块加载器也能加载资产吗（html/css/...）
【发布时间】：2014-09-15 09:42:31
【问题描述】：

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

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

我问是因为我开始使用具有自己的 HTML 导入的 WebComponents 和 Polymer，并使用具有自己的导入/加载器 (system.js) 的 ES6 来实现它们。

【问题讨论】：

标签： html module loader polymer ecmascript-6

【解决方案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 文件中添加依赖项，然后运行“jspm install”，这会将覆盖添加到 package.js 和 jspm.config.js

【讨论】：

这不会是向前兼容的，对吧？现在使用 System.js 编写 ES6 代码的部分想法。如果没有 System.js 就无法使用代码（例如，当 ES6 被普遍采用以至于放弃它时），它就不是真正的 ES6 代码。

【解决方案2】：

我知道您提到了 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
    });

使用异步函数更简洁：

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)

对于其他资源类型，您可以使用blob() 方法处理图像，以及未决的 ES6 模块支持，eval() 用于 JavaScript 等。

【讨论】：