Webpack を使用して jQuery プラグインの依存関係を効果的に管理するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-12-04 13:35:12

オリジナル

153 人が閲覧しました

How to Effectively Manage jQuery Plugin Dependencies with Webpack?

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

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

著者別の最新記事