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

Question

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

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

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

原文由 backspaces 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您使用 SystemJS ，那么您可以使用 插件 加载资产：

 // 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!';

最后，您可以使用 文本插件 检索文件的内容：

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

---

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

原文由 urish 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 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 等。

原文由 Brett Zamir 发布，翻译遵循 CC BY-SA 3.0 许可协议