Peut es6 du chargeur de module également la charge des actifs (html/css/...)

ES6 modules sont basés sur un flexible de chargeur d'architecture (bien que la norme n'est pas définitif, donc ...).

Est-ce à dire ES6 du chargeur, basé sur system.js, peut charger tous actifs? I. e. CSS, HTML, Images, Texte, .. des fichiers de toute sorte?

Je demande parce que je commence à utiliser des WebComponents & Polymère qui ont leur propre code HTML à l'importation, et de les mettre en œuvre avec ES6, qui a son propre import/chargeur (system.js).

InformationsquelleAutor backspaces | 2014-07-24
  1. 21

    Si vous utilisez SystemJS ensuite, vous pouvez charger des éléments à l'aide les plugins:

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

    Alternativement, vous pouvez utiliser un import déclaration. Cela permettra de s'assurer que le fichier CSS est chargé avant l'exécution de votre script:

    import 'my/file.css!';

    Enfin, vous pouvez récupérer le contenu du fichier à l'aide de la texte plugin:

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

    Une autre option est d'ajouter le css comme une dépendance de JSPM fichiers de configuration. Fondamentalement, l'ajout de la dépendance dans le paquet .fichier json, puis en exécutant 'jspm installer" qui va ajouter le remplacement package.js & jspm.config.js

    • Ce ne sera pas compatible bien, non? Partie de l'idée à l'aide de System.js pour arriver à écrire ES6 code maintenant. Si le code ne peut pas être utilisée sans System.js (comme lors de l'ES6 adoption est tout de même assez pour la laisser tomber, il n'en est pas vraiment ES6 code.
    InformationsquelleAutor urish
  2. 14

    Je sais que vous avez mentionné ES6 modules, mais qui n'apparaît pas à l'appui de CSS en mode natif, si vous cherchez quelque chose de normes de base pour charger les ressources de manière dynamique et désirez quelque chose, éventuellement, un peu moins désagréable que XMLHttpRequest, la nouvelle Chercher de l'API peut être utilisée comme ceci:

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

    C'est encore plus propre avec async fonctions:

    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)

    Pour d'autres types de ressources, vous pouvez utiliser le blob() méthode pour les images, et dans l'attente de ES6 modules de soutien, eval() pour JavaScript, etc.

    InformationsquelleAutor Brett Zamir