es6的模块加载器也可以加载资源(html/css/...)

Question

ES6的模块基于灵活的加载器架构(虽然标准不是最终的,所以......).

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

我问,因为我开始使用WebComponents和Polymer,它们有自己的HTML导入,并使用ES6实现它们,ES6有自己的import/loader(system.js).

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

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等.