バンドルされたES6クラスにインラインでアクセスする方法<script>

私はWebpackを使用してES6クラスをトランスクリルしています。バンドル内にServiceクラスがあり、他のバンドルされたスクリプトによってインポートできるクラスがあるとします。今、私はテンプレートエンジンを使用して、サーバー側に挿入されたデータとそのServiceクラスのメソッドを呼び出す必要があるHTML本体（以下擬似コード）に小さなインラインスクリプトを持っているバンドルされたES6クラスにインラインでアクセスする方法<script>

class Service { 
    constructor() { 
     // 
    } 

    someMethod(data) { 
     // 
    } 
} 

export default Service;

TwigやBladeなどのもちろん、それは追加の非同期呼び出しを防ぐように私は実際にサーバーのデータのように利用できるインラインであることを思い...新しいServiceオブジェクトは動作しません

<body> 
    ... 
    <script> 
     var data = {{ $json_server_data }}; 

     var service = new Service; 

     Service.someMethod(data); 
    </script> 
</body>

を作成します。 Serviceクラスでウィンドウの名前空間を汚染すると、クラスローダーのメリットを捨てるように感じられます。

どのように対処しますか？別のアプローチを取ることについての示唆ももちろん歓迎します。

出典

2017-06-13 Propaganistas

私達にあなたのWebPACKの設定を表示します。どのモジュールからどのエクスポートをどのように利用できるかを選択することができます。そして今、グローバルスコープを使用することには何も問題はありません。これはそのために作られたものです。「サービス」が必要なときは、不要な汚染ではありません。 – Bergi

あなたサービスクラスは、バンドルされたjavascriptの範囲外では利用できません。だからおそらくそれをglobalにしたいのですが、それをウィンドウオブジェクトにアタッチすることで可能です。

// Service.js 
 
class Service { 
 
    constructor() { 
 
     // 
 
    } 
 

 
    someMethod(data) { 
 
     // 
 
    } 
 
} 
 

 
window.Service = Service; 
 

 
export default Service; 
 

 

 
// usage 
 
let myService = new Service();

出典

2017-06-13 09:08:17

サービスクラスコードを含むようにOPを更新しました。私はあなたのスニペットとは対照的に、クラスをエクスポートしていることに注意してください。サービスオブジェクトをインラインで要求すると、定義されていないエラーが発生します。 – Propaganistas

@Propaganistas最新の回答をご覧ください。 –

他の可能性はありますか？ウィンドウにアタッチすると、クラスローダの利得を捨てるように感じる... – Propaganistas

バンドルされたES6クラスにインラインでアクセスする方法<script>

答えて

関連する問題