web-dev-qa-db-fra.com

Le chargeur de modules de can es6 peut-il également charger des actifs (html / css / ...)

Les modules d'ES6 sont basés sur une architecture de chargeur flexible (bien que la norme ne soit pas définitive, donc ...).

Cela signifie-t-il que le chargeur d'ES6, basé sur system.js, peut charger tous les actifs? C'est à dire. Fichiers CSS, HTML, Images, Texte, .. de toute sorte?

Je demande parce que je commence à utiliser WebComponents & Polymer qui ont leur propre import HTML, et les implémentent avec ES6, qui a son propre import/loader (system.js).

htmlmoduleloaderpolymerecmascript-6
36
backspaces

Si vous utilisez SystemJS alors vous pouvez charger des actifs en utilisant plugins :

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

Vous pouvez également utiliser une instruction import. Cela garantira 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 en utilisant plugin texte :

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

Une autre option consiste à ajouter le CSS en tant que dépendance dans les fichiers de configuration JSPM. Fondamentalement, ajouter la dépendance dans le fichier .json du package spécifique, puis exécuter "jspm install" qui ajoutera le remplacement à package.js & jspm.config.js

21
urish

Je sais que vous avez mentionné les modules ES6, mais comme cela ne semble pas prendre en charge CSS en natif, si vous cherchez quelque chose basé sur des normes pour charger dynamiquement les ressources et que vous souhaitez quelque chose de moins désagréable que XMLHttpRequest, le nouveau Fetch API pourrait être utilisé 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 les fonctions asynchrones:

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 les autres types de ressources, vous pouvez utiliser la méthode blob() pour les images et la prise en charge des modules ES6 en attente, eval() pour JavaScript, etc.

14
Brett Zamir