Esponi jQuery a un vero oggetto Window con Webpack

Voglio esporre l'oggetto jQuery all'oggetto finestra globale accessibile all'interno della console per sviluppatori nel browser. Ora nella mia configurazione del webpack ho le seguenti righe:

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

Queste righe aggiungono le definizioni jQuery a ogni file nei miei moduli webpack. Ma quando creo il progetto e provo ad accedere a jQuery nella console per sviluppatori in questo modo:

window.$;
window.jQuery;

dice che queste proprietà sono indefinite ...

C'è un modo per risolvere questo problema?

È necessario utilizzare il caricatore di esposizioni .

npm install expose-loader --save-dev

Puoi farlo quando ne hai bisogno:

require("expose?$!jquery");

oppure puoi farlo nella tua configurazione:

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

AGGIORNAMENTO : A partire dal webpack 2, è necessario utilizzare expose-loader invece di expose :

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

ProvidePlugin sostituisce un simbolo in un'altra origine tramite la rispettiva importazione, ma non espone il simbolo nello spazio dei nomi globale. Un classico esempio sono i plugin jQuery. La maggior parte di loro si aspetta solo jQuerydi essere definita a livello globale. Con il ProvidePluginti assicureresti che jQuery sia una dipendenza (ad es. Caricato prima) e la presenza di jQuerynel loro codice verrebbe sostituita con l'equivalente grezzo webpack di require('jquery').

Se hai script esterni che fanno affidamento sul simbolo per essere nello spazio dei nomi globale (come diciamo un JS ospitato esternamente, chiamate Javascript in Selenium o semplicemente accedendo al simbolo nella console del browser), vuoi usare expose-loaderinvece.

In breve: ProvidePlugin gestisce le dipendenze in fase di compilazione ai simboli globali mentre expose-loadergestisce le dipendenze di runtime ai simboli globali.

Sembra che l' windowoggetto sia esposto in tutti i moduli.

Perché non importare / richiedere JQuerye inserire:

window.$ = window.JQuery = JQuery;

Dovrai assicurarti che ciò avvenga prima di richiedere / importare qualsiasi modulo che ne fa uso window.JQuery, sia in un modulo che richiede o nel modulo in cui viene utilizzato.

Questo ha sempre funzionato per me. incluso per webpack 3 window.$ = window.jQuery = require("jquery");

Nessuno dei precedenti ha funzionato per me. (e davvero non mi piace la sintassi expose-loader). Anziché,

Ho aggiunto a webpack.config.js:

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

Quindi tutti i moduli hanno accesso tramite jQuery tramite $.

Puoi esporlo alla finestra aggiungendo quanto segue a uno qualsiasi dei tuoi moduli in bundle da webpack:

window.$ = window.jQuery = $

Aggiornamento per Webpack v2

Installa expose-loader come descritto da Matt Derrick:

npm install expose-loader --save-dev

Quindi inserisci il seguente snippet nel tuo webpack.config.js:

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

(dai documenti di expose-loader )

Nel mio caso funziona

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