Webpack で jQuery プラグインの依存関係を管理する方法
Webpack を使用する場合、アプリケーション コードとライブラリを別のバンドルに編成するのが一般的です。たとえば、すべてのカスタム コード用に「bundle.js」を作成し、jQuery や React などのライブラリ用に「vendors.js」を作成する場合があります。ただし、jQuery に依存し、「vendors.js」内に必要なプラグインを組み込む場合には課題が発生します。
ProvidePlugin: Global Variable Injection
1 つのアプローチは、 ProvidePlugin。「$」や「jQuery」などの特定の識別子が見つかったときに暗黙的なグローバルを挿入します。 Webpack を設定すると、グローバルで "$" が発生したときに "var $" を先頭に追加するように指示できます。
例:
plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ]
imports-loader : このバインディング構成
imports-loader では手動変数が許可されています 注射。一部のレガシー モジュールは、ウィンドウ オブジェクトとして「this」が存在すると想定しており、「this」が「module.exports」と同等である CommonJS コンテキストと競合する可能性があります。 imports-loader は、この動作をオーバーライドして、「this」をウィンドウ オブジェクトにバインドできます。
例:
module: { loaders: [ { test: /[\/\]node_modules[\/\]some-module[\/\]index\.js$/, loader: "imports-loader?this=>window" } ] }
imports-loader: AMD の無効化
特定のモジュールは、AMD や AMD などの複数のモジュール スタイルをサポートしています。 CommonJS。ただし、従来とは異なるエクスポート方法の定義と採用を優先する場合があります。これは、imports-loader で "define = false" を設定して CommonJS を強制することで回避できます。
例:
module: { loaders: [ { test: /[\/\]node_modules[\/\]some-module[\/\]index\.js$/, loader: "imports-loader?define=>false" } ] }
script-loader:グローバル スクリプトのインポート
グローバル変数が問題ではない場合、従来のスクリプトを実行するだけが目的の場合は、スクリプト ローダーを使用できます。