Q&A
概要
ES6でクラスを作成して、別のHTMLファイル内のscriptタグで利用したいのですが、エラーになります。
前提として、webpackでbabel-loaderを使用して、ES6をES5に変換しています。
詳細
以下のように、testClass.jsを作成して、TestClassを定義しています。
javascript
1export class TestClass { 2 3 constructor() { 4 } 5 6}
上記クラスのビルド結果が、/dist/build.jsに出力されるものとして
利用する箇所では、以下のようにbuild.jsを読み込んで、TestClassのインスタンスを生成しています。
html
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <div id="app"></div> 9 <script src="/dist/build.js"></script> 10 <script type="text/javascript"> 11 var b = new TestClass(); 12 </script> 13 </body> 14</html>
ですが、これをブラウザで実行してみると
ReferenceError: Can't find variable: TestClass
と表示されます。
私の想定は、ES5の形式に変換されたTestClassが、build.jsに出力されているので、別のscriptタグで参照できるだろうと考えました。ですが、エラーになってしまいます。
一方で、webpackのエントリポイントのjsコードなどでは、TestClassのインスタンスを生成する事はできるようでした。
（webpackビルドが関連するjsファイル内では正常にクラスを参照できる模様）
エラーの解消方法を教えていただきたいのです。
よろしくお願いいたします。
回答1件
0
ベストアンサー
私の想定は、ES5の形式に変換されたTestClassが、build.jsに出力されているので、別のscriptタグで参照できるだろうと考えました。
特に何もしない場合、Webpack内で使った変数名はグローバルにならず、Webpackのコード内のローカル変数となります。
外でも使いたい場合は、window.TestClass = TestClass;のように、window経由でグローバル変数に割り付けてください。
投稿2018/09/01 11:19
総合スコア145183
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/01 11:23