attribute - El cargador de módulos de es6 también puede cargar activos(html/css/...)

title html css

Question

Los módulos de ES6 se basan en una arquitectura de cargador flexible (aunque el estándar no es definitivo, por lo tanto ...).

¿Esto significa que el cargador de ES6, basado en system.js, puede cargar todos los activos? Es decir, CSS, HTML, imágenes, texto, ... archivos de cualquier tipo?

Lo pregunto porque estoy empezando a usar WebComponents & Polymer, que tienen su propia importación HTML, y los estoy implementando con ES6, que tiene su propia importación / cargador (system.js).

Answer 1

Sé que mencionó los módulos ES6, pero como eso no parece ser compatible con CSS de forma nativa, si está buscando algo basado en estándares para cargar recursos dinámicamente y desear algo posiblemente menos desagradable que XMLHttpRequest , la nueva Fetch API podría ser utilizada Me gusta esto:

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

Esto es aún más limpio con las funciones asíncronas:

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)

Para otros tipos de recursos, puede usar el método blob() para imágenes y el soporte de módulos ES6 pendientes, eval() para JavaScript, etc.

Answer 2

Si usa SystemJS , puede cargar activos mediante el uso de plugins :

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

Alternativamente, puede usar una declaración de import . Esto asegurará que el archivo CSS se cargue antes de que se ejecute el script:

import ''my/file.css!'';

Finalmente, puede recuperar el contenido del archivo usando el complemento de texto :

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

Otra opción es agregar el css como una dependencia en los archivos de configuración de JSPM. Básicamente, agregue la dependencia en el paquete específico .json y luego ejecute ''jspm install'', que agregará la anulación a package.js & jspm.config.js