どのようにBabel Compiledクラスをインラインで使用しますか？

Question

私のsrc/index.jsファイルには、クラスが含まれています

export default class Test { 
    constructor() { 
    this._name = 'Test'; 
    } 
} 

バベルは、ES5のファイルにコンパイルします。続いて

<script src="lib/library.js" type="text/babel"></script> 

：

<script type="text/javascript"> 
     var test = new Test(); 
</script> 

は、しかし、私は 'テスト' は定義されていない取得私のindex.htmlファイルで は、私のようなものを持っていると思います。クラスがbabelコンパイル済みファイルでエクスポートされているindex.htmlで、どのようにes5インラインjを使用できますか？

ありがとうございました。

Answer 1

ES6モジュールは、グローバルな状態を内部の定義で汚染しないため、明示的にインポートすることなくエクスポートにアクセスすることもできません。グローバルクラスにアクセスできるようにする

一つの解決策はそれほど明確に行うことによって、次のようになります。

class Test { 
    constructor() { 
    this._name = 'Test'; 
    } 
} 

window.Test = Test 

今、あなたはどこでもあなたのコード内のクラスをインスタンス化することができるはずです。

Answer 2

デフォルトでは、このクラスは、クラスをCommon JS環境でのみ使用可能なモジュールに変換します。

this babel pluginを使用できますが、UMDにモジュールが変換され、<script>タグでアクセスできるグローバル変数が設定されます。