ホームページ > ウェブフロントエンド > jsチュートリアル > Webpack を使用して jQuery プラグインの依存関係を効果的に管理するにはどうすればよいですか?

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

Mary-Kate Olsen
リリース: 2024-12-04 13:35:12
オリジナル
122 人が閲覧しました

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

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

著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート