Kann der Modullader von ES6 auch Assets laden (html/css/…)

Lesezeit: 2 Minuten

Benutzer-Avatar
Rückschritte

Die Module von ES6 basieren auf einer flexiblen Loader-Architektur (obwohl der Standard nicht endgültig ist, also …).

Bedeutet dies, dass der Loader von ES6, basierend auf system.js, laden kann alle Vermögenswerte? Dh CSS, HTML, Bilder, Text, .. Dateien jeglicher Art?

Ich frage, weil ich anfange, WebComponents & Polymer zu verwenden, die über einen eigenen HTML-Import verfügen, und sie mit ES6 implementiere, das über einen eigenen Import/Loader (system.js) verfügt.

Benutzer-Avatar
urish

Wenn du benutzt SystemJS dann können Sie Assets laden, indem Sie verwenden Plugins:

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

Alternativ können Sie auch eine verwenden import Aussage. Dadurch wird sichergestellt, dass die CSS-Datei geladen wird, bevor Ihr Skript ausgeführt wird:

import 'my/file.css!';

Schließlich können Sie den Inhalt der Datei mit der abrufen Text-Plugin:

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

Eine weitere Option besteht darin, CSS als Abhängigkeit in JSPM-Konfigurationsdateien hinzuzufügen. Fügen Sie im Wesentlichen die Abhängigkeit in der spezifischen Paket-.json-Datei hinzu und führen Sie dann „jspm install“ aus, wodurch die Überschreibung zu „package.js“ und „jspm.config.js“ hinzugefügt wird

  • Dies wird jedoch nicht aufwärtskompatibel sein, oder? Ein Teil der Idee, System.js zu verwenden, um jetzt ES6-Code zu schreiben. Wenn der Code niemals ohne System.js verwendet werden kann (wie wenn die Einführung von ES6 häufig genug ist, um ihn fallen zu lassen), handelt es sich nicht wirklich um ES6-Code.

    – Kyeotisch

    25. Mai 2015 um 21:41 Uhr

Benutzer-Avatar
Brett Zamir

Ich weiß, dass Sie ES6-Module erwähnt haben, aber da dies CSS nicht nativ zu unterstützen scheint, wenn Sie nach etwas Standardbasiertem suchen, um Ressourcen dynamisch zu laden, und sich etwas wünschen, das möglicherweise etwas weniger unangenehm ist als XMLHttpRequestdas neue API abrufen könnte so verwendet werden:

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

Dies ist noch sauberer mit asynchronen Funktionen:

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)

Für andere Ressourcentypen können Sie die verwenden blob() Methode für Bilder und ausstehende Unterstützung für ES6-Module, eval() für JavaScript usw.

1228290cookie-checkKann der Modullader von ES6 auch Assets laden (html/css/…)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy