ES6的模塊加載器還可以加載資源（html/css/...）

Question

ES6的模塊基於靈活的加載器架構（儘管標準不是最終的，所以...）。

這是否意味着ES6的loader，基於system.js，可以加載全部資產？即CSS，HTML，圖像，文本，..任何類型的文件？

我問，因爲我開始使用WebComponents &聚合物有自己的HTML導入，並實施ES6，它有自己的導入/加載器（system.js）。

Answer 1

如果使用SystemJS，那麼你可以通過使用plugins加載資產：

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

或者，您也可以使用import聲明。這將確保該腳本執行之前，CSS文件加載：

import 'my/file.css!'; 

最後，你可以檢索使用該文件的內容的text plugin：

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

---

另一種選擇是將CSS添加爲JSPM配置文件中的依賴項。基本上在特定的包.json文件中添加依賴關係，然後運行'jspm install'，這會將重寫添加到package.js & jspm.config.js

Answer 2

我知道你提到了ES6模塊，但是因爲沒有出現支持CSS本身，如果你正在尋找一些基於標準的動態加載資源，並且希望的東西可能比XMLHttpRequest稍差不快，新Fetch API可以使用這樣的：

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

這是更清潔帶異步功能：

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) 

對於其他資源類型，您可以使用圖像blob()法，待定ES6模塊的支持，爲eval() JavaScript等