Wystaw jQuery na rzeczywisty obiekt Window za pomocą Webpack

Chcę wystawić obiekt jQuery na globalny obiekt okna, który jest dostępny w konsoli programisty w przeglądarce. Teraz w mojej konfiguracji webpacka mam następujące linie:

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

Te wiersze dodają definicje jQuery do każdego pliku w moich modułach webpack. Ale kiedy buduję projekt i próbuję uzyskać dostęp do jQuery w konsoli programisty w następujący sposób:

window.$;
window.jQuery;

mówi, że te właściwości są niezdefiniowane ...

Czy jest sposób, aby to naprawić?

Musisz użyć expose-loader .

npm install expose-loader --save-dev

Możesz to zrobić, gdy tego potrzebujesz:

require("expose?$!jquery");

lub możesz to zrobić w swojej konfiguracji:

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

AKTUALIZACJA : Od webpacka 2 musisz użyć expose-loader zamiast expose :

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

ProvidePlugin zastępuje symbol w innym źródle poprzez odpowiedni import, ale nie uwidacznia symbolu w globalnej przestrzeni nazw. Klasycznym przykładem są wtyczki jQuery. Większość z nich oczekuje, jQueryże zostaną zdefiniowane globalnie. Dzięki temu ProvidePluginupewnisz się, że jQuery jest zależnością (np. Załadowana wcześniej), a występowanie jQueryw ich kodzie zostanie zastąpione surowym odpowiednikiem pakietu webpack require('jquery').

Jeśli masz zewnętrzne skrypty opierające się na tym, że symbol znajduje się w globalnej przestrzeni nazw (jak powiedzmy zewnętrznie hostowany JS, wywołania JavaScript w Selenium lub po prostu uzyskując dostęp do symbolu w konsoli przeglądarki), chcesz użyć expose-loaderzamiast tego.

W skrócie: ProvidePlugin zarządza zależnościami czasu kompilacji od symboli globalnych, podczas gdy expose-loaderzarządza zależnościami czasu wykonywania od symboli globalnych.

Wygląda na to, że windowobiekt jest widoczny we wszystkich modułach.

Dlaczego nie po prostu zaimportować / wymagać JQueryi umieścić:

window.$ = window.JQuery = JQuery;

Będziesz musiał upewnić się, że dzieje się to przed zażądaniem / zaimportowaniem dowolnego modułu, który używa window.JQuery, w wymagającym module lub w module, w którym jest używany.

To zawsze działało dla mnie. w tym dla webpacka 3 window.$ = window.jQuery = require("jquery");

Żadne z powyższych nie działało dla mnie. (i naprawdę nie podoba mi się składnia expose-loader). Zamiast,

Dodałem do webpack.config.js:

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

Wszystkie moduły mają dostęp poprzez jQuery poprzez $.

Możesz wyświetlić go w oknie, dodając następujące elementy do dowolnego z modułów w pakiecie webpack:

window.$ = window.jQuery = $

Aktualizacja dla Webpack v2

Zainstaluj program ładujący ekspozycję zgodnie z opisem Matta Derricka:

npm install expose-loader --save-dev

Następnie wstaw następujący fragment do swojego webpack.config.js:

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

(z dokumentacji expose-loader )

W moim przypadku działa

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