Can es6'nın modül yükleyicisi de yükleri yükler (html/css/...)

Question

ES6'nın modülleri, esnek bir yükleyici mimarisine dayanır (standart son değil, ancak ...).

Bu, ES6's loader'ı temel alarak system.js aracını, tüm öğelerini yükleyebilir mi? Yani CSS, HTML, Görüntüler, Metin, .. herhangi bir türdeki dosyalar?

Kendi HTML içe aktarmalarına sahip WebComponents & Polimer kullanmaya başladığımdan ve kendi import/loader'ına (system.js) sahip olan ES6 ile bunları uygulamaya başladığım için soruyorum.

Answer 1

o zaman plugins kullanarak varlıklarını yükleyebilirsiniz SystemJS kullanıyorsanız:

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

Alternatif olarak, bir import deyimi kullanabilirsiniz.

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

---

Başka bir seçenek ise: Kullandığınız dosyanın içeriğini text plugin alabilirsiniz, Nihayet

import 'my/file.css!'; 

: Bu, komut yürütmeden önce CSS dosyası yüklenmiş olduğundan emin olun JSPM yapılandırma dosyalarına css bağımlılığı eklemek için. Temelde özel paket .json dosyasında bağımlılığı ekleme ve sonra seni ES6 modüllerini belirtilen biliyorum & jspm.config.js

Answer 2

package.js için geçersiz kılmayı katacak olan 'yüklemek jspm' çalışan, ancak o görünmüyor Eğer bir şey arıyorsanız, doğal CSS destekleyen kaynakları dinamik yük ve muhtemelen biraz daha az nahoş XMLHttpRequest daha bir şey dilemek için standartlar tabanlı, yeni Fetch API böyle kullanılabilecek:

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

Bu da temizleyici Eşzamansız işlevler ile:

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) 

diğer kaynak türlerinde, vb