Может ли загрузчик модулей es6 также загружать активы (html/css/...)

Модули ES6 основаны на гибкой архитектуре загрузчика (хотя стандарт не является окончательным, поэтому...).

Означает ли это, что загрузчик ES6, основанный на system.js, может загружать все активы? То есть CSS, HTML, Изображения, Текст,.. любые файлы?

Я прошу, потому что я начинаю использовать WebComponents и Polymer, у которых есть собственный импорт HTML, и реализующий их с ES6, который имеет свой собственный import/loader (system.js).

Ответ 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 загружен до выполнения script:

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

Ответ 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 и т.д.