Webpack - 一般的なファイルを大規模なコードベースにインポートする際の問題

Question

私は、以下に示す 'third_party.js'というファイルを持っています。私はこれを既存のWebpackアプリに持っていきたいと思っています（インポートや、コードベースでの必要はありませんが、webpackのみ）。ご覧のとおり、IIFEには窓が必要で、これが機能するには$が必要です。私はクリックすることができ、グローバルレベルからこれを処理する簡単な方法があることを望んでいた私のアプリで多くの.btnsを持っています。

third_party.js

(function (window, $) { 

    $(function() { 
    $('.btn').on('click', function (event) { 
     event.preventDefault(); 
     console.log("button was clicked"); 
    }); 
    }); 

})(window, jQuery); 

Answer 1

あなたののWebPACKのentryにこのファイルを追加することができます。例えば

：

module.exports = { 
    entry: [ 
     '/path/to/third_party.js', 
     'path/to/original/file.js' 
    ], 
    output: { 
     path: 'path/to/output/dir', 
     name: 'bundle.js' 
    }, 
    ... 
}; 

あなたはWebPACKのバンドルファイル（あなたのWebPACKの出力）を含める前に、あなたはjQueryのページのスクリプトタグにロードされていることを確認してください。

何かのように：

<script src="cdn.com/jquery.min.js"></script> 
<script src="path/to/output/dir/bundle.js"></script>