コンパイル済みのES6〜ES5ファイルをブラウザで使用する方法は？

Question

私はES6に2つのモジュールがあります。

//mycalss.js 
class MyClass { 
} 
export {MyClass}; 

//main.js 
import {MyClass} from './../src/myclass'; 

をそして私は、コンパイルおよびバンドルプロセスを処理するために、Laravelミックスを使用しています。

最終的に私はmain.jsになります。

私はこのファイルを自分のhtmlにリンクしています。

<script type="text/javascript" src="main.js"></script> 

とクラスMyClassへの参照を作成しよう：

<script type="text/javascript"> 

    var object = new MyClass(); 

</script> 

しかしUncaught ReferenceError: MyClass is not definedがスローされます。

私はどのようにしてes6からes5にコンパイルされたクラスをHTMLで使用しますか？

Answer 1

ES6モジュールにはモジュールスコープがあります。これにより、変数がグローバルスコープに漏れないようにします。これはまさにモジュール性のためのものです。

グローバルスコープ内のES6モジュール（モジュールパターンを実装するCommonJSモジュールまたはIIFEにも同じ）からアイテムを使用するには、それらをグローバルとして定義する必要があります。クライアントサイドスクリプトの場合、これは、彼らがバンドルアプリケーション内部windowプロパティとして定義されるべきであることを意味する：

window.MyClass = MyClass; 

これは、潜在的なXYの問題を示しています。より良い選択肢は、グローバルスコープで利用できる理由を再考することです。すでにバンドルされているES6アプリケーションがある場合は、インライン<script type="text/javascript">...</script>からコードを実行することになっています。

Answer 2

Babelを使用すると、ブラウザでJavaScriptをES6からES5にコンパイルできます。

多くの場合、webpackを自動的に使用してHTML内に挿入する必要があります。