Expose jQuery zu echten Window-Objekt mit Webpack

Question

Ich möchte jQuery-Objekt zu dem globalen Fensterobjekt verfügbar machen, das in der Entwicklerkonsole im Browser zugänglich ist. Jetzt in meinem webpack Config Ich habe folgende Zeilen:

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

Diese Linien fügen Sie die jQuery-Definitionen für jede Datei in meinem webpack Module. Aber wenn ich das Projekt erstellen und versuchen jQuery in Entwickler-Konsole wie folgt zugreifen:

window.$; 
window.jQuery; 

es sagt, dass diese Eigenschaften nicht definiert sind ...

Gibt es eine Möglichkeit, dies zu beheben?

Answer 1

Sie müssen die expose-loader verwenden.

npm install expose-loader --save-dev 

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

require("expose?$!jquery"); 

oder Sie können dies in der Config tun:

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

UPDATE: Ab webpack 2, Sie muss verwendet werden expose-loader statt aussetzen:

Answer 2

Das ProvidePlugin ersetzt ein Symbol in einer anderen Quelle durch den entsprechenden Import, stellt jedoch das Symbol im globalen Namespace nicht zur Verfügung. Ein klassisches Beispiel sind jQuery-Plugins. Die meisten von ihnen erwarten nur, dass jQuery global definiert wird. Mit der ProvidePlugin würden Sie sicherstellen, dass jQuery eine Abhängigkeit ist (z. B. zuvor geladen) und das Auftreten von jQuery in ihrem Code durch das Webpack-Rohequivalent von require('jquery') ersetzt würde.

Wenn externe Skripts darauf angewiesen sind, dass sich das Symbol im globalen Namespace befindet (z. B. ein extern gehosteter JS, Javascript in Selenium aufruft oder einfach auf das Symbol in der Browserkonsole zugreift), verwenden Sie stattdessen expose-loader.

Kurz gesagt: ProvidePlugin verwaltet Build-Time-Abhängigkeiten zu globalen Symbolen, während expose-loader Laufzeitabhängigkeiten zu globalen Symbolen verwaltet.

Answer 3

In meinem Fall arbeitet

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

Answer 4

Sieht aus wie das window Objekt in allen Modulen ausgesetzt ist.

Warum nicht nur Import/erfordern JQuery und setzen:

window.$ = window.JQuery = JQuery; 

in Ihrem Einstiegspunkt-Modul?

Answer 5

Update für Webpack v2

expose-loader installieren, wie von Matt Derrick beschrieben:

npm install expose-loader --save-dev 

Dann das folgende Snippet eingefügt in Ihrem webpack.config.js:

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

(vom expose-loader docs)

Answer 6

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