Pertanyaan Dapatkah loader modul es6 juga memuat aset (html / css /…)


Modul ES6 didasarkan pada arsitektur loader yang fleksibel (meskipun standarnya tidak final, jadi ...).

Apakah ini berarti loader ES6, berdasarkan pada system.js, dapat memuat semua aktiva? Yaitu. CSS, HTML, Gambar, Teks, .. file apa pun?

Saya bertanya karena saya mulai menggunakan WebComponents & Polymer yang memiliki impor HTML mereka sendiri, dan mengimplementasikannya dengan ES6, yang memiliki impor / loader (system.js).


32
2017-07-24 00:55


asal


Jawaban:


Jika Anda menggunakan SystemJS maka Anda dapat memuat aset dengan menggunakan plugin:

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

Atau, Anda dapat menggunakan import pernyataan. Ini akan memastikan bahwa file CSS dimuat sebelum skrip Anda dijalankan:

import 'my/file.css!';

Akhirnya, Anda dapat mengambil isi file menggunakan plugin teks:

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

Pilihan lainnya adalah menambahkan css sebagai dependensi dalam file konfigurasi JSPM. Pada dasarnya menambahkan ketergantungan dalam paket spesifik. File json dan kemudian menjalankan 'jspm install' yang akan menambahkan override ke package.js & jspm.config.js


19
2017-08-22 11:41



Saya tahu Anda menyebutkan modul ES6, tetapi karena tampaknya tidak mendukung CSS secara asli, jika Anda mencari sesuatu yang berbasis standar untuk memuat sumber daya secara dinamis dan berharap untuk sesuatu yang mungkin agak kurang menyenangkan daripada XMLHttpRequest, yang baru Ambil API mungkin digunakan seperti ini:

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

Ini bahkan lebih bersih dengan fungsi asinkron:

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)

Untuk tipe sumber daya lainnya, Anda dapat menggunakan blob() metode untuk gambar, dan menunggu dukungan modul ES6, eval() untuk JavaScript, dll.


10
2018-06-05 18:48