javascript - 外部（HTMLのscriptタグ）からwebpack化されたコードを呼び出す

私が次のようなクラスを持っているとします（TypeScriptで書かれています）、そしてそれをwebpackでbundle.jsにバンドルします。

export class EntryPoint {
    static run() {
        ...
    }
}

私の index.html にはバンドルを含めますが、それからその静的メソッドも呼び出したいです。

<script src="build/bundle.js"></script>
<script>
    window.onload = function() {
        EntryPoint.run();
    }
</script>

しかし、この場合 EntryPoint は未定義です。では、別のスクリプトからバンドルされた JavaScript をどのように呼び出せばよいでしょうか？

追加：Webpack設定ファイル。

回答 #1

あなたはwebpackのバンドルをライブラリとして公開したいようです。webpackを設定して、あなた自身の変数（例えばEntryPoint）内でグローバルコンテキストにライブラリを公開することができます。

私は TypeScript を知らないので、例では代わりに普通の JavaScript を使っています。しかし、ここで重要なのは webpack の設定ファイルであり、特に output セクションです:

webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    path: './lib',
    filename: 'yourlib.js',
    libraryTarget: 'var',
    library: 'EntryPoint'
  }
};

index.js

module.exports = {
  run: function () {
    console.log('run from library');
  }
};

そうすれば、期待通りにライブラリのメソッドにアクセスできるようになります:

<script src="lib/yourlib.js"></script>
<script>
  window.onload = function () {
    EntryPoint.run();
  };
</script>

実際のコードで要点を確認してください。

回答 #2

私は、単に自分の main/index.js ファイルから呼び出した import 文を使うことで、webpack.config.js の追加の変更なしでこれを動作させることができました:

import EntryPoint from './EntryPoint.js';
window.EntryPoint = EntryPoint;

最初は require を使って同じことを達成しようとしましたが、実際のクラスではなく、モジュールラッパーが window.EntryPoint に割り当てられました。

回答 #3

私の状況では、関数を作成するときにそれを window に書き込むことで、別のスクリプトからバンドルされた JavaScript 内の関数を呼び出すことができました。

// In the bundled script:
function foo() {
    var modal = document.createElement('div');
}
// Bind to the window
window.foo = foo;
// Then, in the other script where I want to reference the bundled function I just call it as a normal function
<button onClick="window.foo()">Click Me</button>