Setzen Sie jQuery mit Webpack einem echten Window-Objekt aus

Ich möchte das jQuery-Objekt für das globale Fensterobjekt verfügbar machen, auf das in der Entwicklerkonsole im Browser zugegriffen werden kann. Jetzt habe ich in meiner Webpack-Konfiguration folgende Zeilen:

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

Diese Zeilen fügen jeder Datei in meinen Webpack-Modulen die jQuery-Definitionen hinzu. Aber wenn ich das Projekt erstelle und versuche, auf jQuery in der Entwicklerkonsole wie folgt zuzugreifen:

window.$;
window.jQuery;

es heißt, dass diese Eigenschaften undefiniert sind ...

Gibt es eine Möglichkeit, dies zu beheben?

Sie müssen den Expose-Loader verwenden .

npm install expose-loader --save-dev

Sie können dies entweder tun, wenn Sie es benötigen:

require("expose?$!jquery");

oder Sie können dies in Ihrer Konfiguration tun:

loaders: [
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]

UPDATE : Ab Webpack 2 müssen Sie den Expose-Loader anstelle von Expose verwenden :

module: {
    rules: [{
        test: require.resolve('jquery'),
        use: [{
            loader: 'expose-loader',
            options: '$'
        }]
    }]
}

Das ProvidePlugin ersetzt durch den jeweiligen Import ein Symbol in einer anderen Quelle, macht das Symbol jedoch nicht im globalen Namespace verfügbar. Ein klassisches Beispiel sind jQuery-Plugins. Die meisten von ihnen erwarten lediglich eine jQueryglobale Definition. Mit dem ProvidePluginwürden Sie sicherstellen, dass jQuery eine Abhängigkeit ist (z. B. zuvor geladen) und das Auftreten jQueryin ihrem Code durch das Webpack-Raw-Äquivalent von ersetzt wird require('jquery').

Wenn Sie externe Skripte haben, die sich darauf verlassen, dass sich das Symbol im globalen Namespace befindet (z. B. ein extern gehostetes JS, Javascript ruft Selen auf oder einfach auf das Symbol in der Browserkonsole zugreift), möchten Sie expose-loaderstattdessen das verwenden.

Kurz gesagt: ProvidePlugin verwaltet Build-Time-Abhängigkeiten zu globalen Symbolen, während das zur expose-loaderLaufzeit Abhängigkeiten zu globalen Symbolen verwaltet.

Es sieht so aus, als ob das windowObjekt in allen Modulen verfügbar ist.

Warum nicht einfach importieren / benötigen JQueryund setzen:

window.$ = window.JQuery = JQuery;

Sie müssen sicherstellen, dass dies geschieht, bevor Sie ein Modul benötigen / importieren, das verwendet wird window.JQuery, entweder in einem erforderlichen Modul oder in dem Modul, in dem es verwendet wird.

Das hat bei mir immer funktioniert. einschließlich für Webpack 3 window.$ = window.jQuery = require("jquery");

Keines der oben genannten hat bei mir funktioniert. (und ich mag die Expose-Loader-Syntax wirklich nicht). Stattdessen,

Ich habe zu webpack.config.js hinzugefügt:

var webpack = require('webpack');
module.exports = {
   plugins: [
       new webpack.ProvidePlugin({
           $: 'jquery',
       })     
   ]
}

Dann haben alle Module Zugriff über jQuery über $.

Sie können es dem Fenster zugänglich machen, indem Sie jedem Ihrer im Webpack gebündelten Module Folgendes hinzufügen:

window.$ = window.jQuery = $

Update für Webpack v2

Installieren Sie den Expose-Loader wie von Matt Derrick beschrieben:

npm install expose-loader --save-dev

Fügen Sie dann das folgende Snippet in Ihr ein webpack.config.js:

module.exports = {
    entry: {
        // ...
    },
    output: {
        // ...
    },
    module: {
        loaders: [
                { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" }
        ]
    }
};

(aus den Expose-Loader-Dokumenten )

In meinem Fall funktioniert

{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }