HTMLファイルのバンドルされたjavascript（webpackを使用）の関数へのアクセス

Question

私は現在Webアプリケーションを開発中で、WebPackにバンドルされるように自分のコードをリファクタリングする過程にあります。私のHTMLで

私がクリックしたときにsendMessage()関数を呼び出すボタン、私のコードの最初のバージョンで

<button type="button" class="btn btn-default" onclick="sendMessage(document.getElementById('claim').value)">Submit</button> 

を持って、sendMessage()機能は、私はHTMLに直接インポート.jsファイルで定義されていました、

<script src="my_js/newsArticleScript.js"></script>

のsendMessage（）関数が直接ファイルで宣言され、それが任意のクラスやモジュールの内部ではありませんが、それはD他の関数を呼び出します同じファイルにefinedので、私はそれを分けたくありません。

今はWebPackにバンドルされています。

const path = require('path') 
 

 
module.exports = { 
 
    entry: { 
 
    \t homepage: './src/homepageScript.js', 
 
    \t newspage: './src/newsArticleScript.js' 
 
    }, 
 
    output: { 
 
    filename: '[name].bundle.js', 
 
    path: path.resolve(__dirname, 'dist/my_js') 
 

 
    } 
 
}

は私がバンドルされたバージョンをインポートするには、HTML上でのスクリプトのインポートを変更：ここに私の設定ファイルは、（ homepageScript.jsが別のページのためである）です。 そして私は、私はエラーに

[Error] ReferenceError: Can't find variable: sendMessage

を取得し、ボタンを押したときに、今、私はそれについて読んだ、と私はWebPACKのは、グローバルな機能を公開しないことを学びました。私は関数をエクスポートしようとしましたが、同じエラーが発生し続けました。

誰もがこれを手伝ってくれますか？基本的に私が必要とするのは、webpackを設定する方法やJSを変更してHTMLでアクセスできるようにする方法を理解することです。

私はJSの新機能ですので、私のアプリケーションの設計方法が最善ではないので、改善のヒント（おそらくモジュールを使うべきでしょうか、ボタンも）歓迎されるでしょう。ありがとうございました:)

Answer 1

一般に、テキストベースのイベントハンドラを使用することはお勧めできません。つまり、いくつかの選択肢があり、変化の量が増えています。

1. texual onchangeハンドラが動作するために

   、sendMessageはグローバルでなければならないであろう。したがって、最も速い修正は、あなたのコードを変更してそれを行うことです。例えば、あなたのコード内で

   function sendMessage(arg){} 
   

   を持っている場合、それはグローバル変数として公開した後、追加の

   window.sendMessage = sendMessage; 
   

   を追加すると思います。

2. 最近のアプローチは、ボタンからonchangeを削除し、そのボタンにHTMLのIDというラベルが付けられているようにすることです。 id="some-button-id"。

   は、その後、あなたのJSコードでは、あなたの代わりにHTML属性を持つの、JSコードを使用してchangeハンドラ関数を追加する

   var button = document.querySelector("#some-button-id"); 
   button.addEventListener("change", function(){ 
       sendMessage(document.getElementById('claim').value); 
   }); 
   

   を行うことができます。