Предоставьте jQuery реальному объекту Window с помощью Webpack

Я хочу предоставить объект jQuery глобальному объекту окна, который доступен внутри консоли разработчика в браузере. Теперь в моей конфигурации веб-пакета есть следующие строки:

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

Эти строки добавляют определения jQuery к каждому файлу в моих модулях webpack. Но когда я создаю проект и пытаюсь получить доступ к jQuery в консоли разработчика, например, так:

window.$;
window.jQuery;

он говорит, что эти свойства не определены ...

Есть способ исправить это?

Вам нужно использовать экспо-загрузчик .

npm install expose-loader --save-dev

Вы можете сделать это, когда вам это нужно:

require("expose?$!jquery");

или вы можете сделать это в своей конфигурации:

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

ОБНОВЛЕНИЕ : Начиная с webpack 2, вам нужно использовать expose -loader вместо expose :

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

ProvidePlugin заменяет символ в другом источнике посредством соответствующего импорта, но не раскрывает символ в глобальном пространстве имен. Классический пример - плагины jQuery. Большинство из них просто ожидают, jQueryчто они будут определены глобально. С помощью ProvidePluginвы должны убедиться, что jQuery является зависимостью (например, загруженной ранее), а наличие jQueryв их коде будет заменено необработанным эквивалентом веб-пакета require('jquery').

Если у вас есть внешние сценарии, полагающиеся на то, что символ находится в глобальном пространстве имен (например, например, JS, размещенный на внешнем сервере, вызовы Javascript в Selenium или просто доступ к символу в консоли браузера), вы хотите использовать expose-loaderвместо этого.

Вкратце: ProvidePlugin управляет зависимостями времени сборки от глобальных символов, тогда как expose-loaderуправление зависимостями времени выполнения от глобальных символов.

Похоже, windowобъект представлен во всех модулях.

Почему бы просто не импортировать / потребовать JQueryи не поставить:

window.$ = window.JQuery = JQuery;

Вам нужно будет убедиться, что это произойдет, прежде чем запрашивать / импортировать какой-либо модуль, который используется window.JQuery, либо в требуемом модуле, либо в модуле, в котором он используется.

У меня это всегда срабатывало. в том числе для webpack 3 window.$ = window.jQuery = require("jquery");

У меня ничего из вышеперечисленного не сработало. (и мне действительно не нравится синтаксис expose-loader). Вместо,

Я добавил в webpack.config.js:

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

Чем все модули имеют доступ через jQuery через $.

Вы можете открыть его в окне, добавив следующее в любой из ваших модулей, связанных с webpack:

window.$ = window.jQuery = $

Обновление для Webpack v2

Установите expose-loader, как описано Мэттом Дерриком:

npm install expose-loader --save-dev

Затем вставьте следующий фрагмент в свой webpack.config.js:

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

(из документов expose-loader )

В моем случае работает

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