Heim >Web-Frontend >js-Tutorial >Wie verwaltet man jQuery-Plugin-Abhängigkeiten effektiv mit Webpack?

Wie verwaltet man jQuery-Plugin-Abhängigkeiten effektiv mit Webpack?

Mary-Kate OlsenOriginal: 2024-12-04 13:35:12232Durchsuche

How to Effectively Manage jQuery Plugin Dependencies with Webpack?

So verwalten Sie jQuery-Plugin-Abhängigkeiten in Webpack

Bei der Verwendung von Webpack ist es üblich, Anwendungscode und Bibliotheken in separaten Bundles zu organisieren. Beispielsweise könnte man eine „bundle.js“ für den gesamten benutzerdefinierten Code und eine „vendors.js“ für Bibliotheken wie jQuery und React erstellen. Bei der Einbindung von Plugins, die von jQuery abhängen und in „vendors.js“ gewünscht werden, treten jedoch Herausforderungen auf.

ProvidePlugin: Global Variable Injection

Ein Ansatz besteht darin, das zu nutzen ProvidePlugin, das implizite Globale einfügt, wenn auf bestimmte Bezeichner wie „$“ oder „jQuery“ gestoßen wird. Durch die Konfiguration des Webpacks kann man es anweisen, „var $“ voranzustellen, wenn global auf „$“ gestoßen wird.

Beispiel:

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
]

imports-loader : Diese Bindungskonfiguration

Der Imports-Loader ermöglicht die manuelle Variableninjektion. Einige ältere Module gehen davon aus, dass „this“ als Fensterobjekt vorhanden ist, was zu Konflikten mit CommonJS-Kontexten führen kann, in denen „this“ „module.exports“ entspricht. Der Import-Loader kann dieses Verhalten überschreiben und „this“ an das Fensterobjekt binden.

Beispiel:

module: {
    loaders: [
        {
            test: /[\/\]node_modules[\/\]some-module[\/\]index\.js$/,
            loader: "imports-loader?this=>window"
        }
    ]
}

Import-Loader: AMD-Deaktivierung

Bestimmte Module unterstützen mehrere Modulstile, einschließlich AMD und CommonJS. Sie können jedoch vorrangig unkonventionelle Exportmethoden definieren und anwenden. Dies kann umgangen werden, indem CommonJS erzwungen wird, indem „define = false“ mit dem Imports-Loader festgelegt wird.

Beispiel:

module: {
    loaders: [
        {
            test: /[\/\]node_modules[\/\]some-module[\/\]index\.js$/,
            loader: "imports-loader?define=>false"
        }
    ]
}

Script-Loader: Globaler Skriptimport

Wenn globale Variablen kein Problem darstellen und die einfache Ausführung älterer Skripte das Problem ist Zielsetzung kann der Script-Loader verwendet werden. Es führt Module in einem globalen Kontext aus, ähnlich der Verwendung eines