web-dev-qa-db-ja.com

es6のモジュールローダーはアセットも読み込むことができます（html / css / ...）

ES6のモジュールは、柔軟なローダーアーキテクチャに基づいています（ただし、標準は最終的なものではありませんが...）。

これは、system.jsに基づくES6のローダーがallアセットをロードできることを意味しますか？つまりCSS、HTML、画像、テキスト、..あらゆる種類のファイル？

私は、独自のHTMLインポートを備えたWebComponents＆Polymerを使用し始め、独自のインポート/ローダー（system.js）を備えたES6でそれらを実装し始めているため、質問します。

htmlmoduleloaderpolymerecmascript-6
36
backspaces

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

別のオプションは、CSSMをJSPM構成ファイルに依存関係として追加することです。基本的に、特定のパッケージ.jsonファイルに依存関係を追加してから、 'jspm install'を実行し、package.jsおよびjspm.config.jsにオーバーライドを追加します

21
urish

ES6モジュールに言及したことは知っていますが、CSSをネイティブにサポートしていないようです。リソースを動的にロードする標準ベースの何かを探していて、おそらくXMLHttpRequestよりも少し不快なものを望んでいる場合、 フェッチ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モジュールサポート、JavaScriptにはeval()などを使用できます。

14
Brett Zamir