Webpack を使用して jQuery プラグインの依存関係を効果的に管理するにはどうすればよいですか?

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:グローバル スクリプトのインポート

グローバル変数が問題ではない場合、従来のスクリプトを実行するだけが目的の場合は、スクリプト ローダーを使用できます。