Открыть jQuery для реального объекта Window с помощью Webpack

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

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

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

window.$;
window.jQuery;

он говорит, что эти свойства undefined...

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

Ответы

Ответ 1

Вам нужно использовать expose-loader.

npm install expose-loader --save-dev

Вы можете сделать это, когда это потребуется:

require("expose?$!jquery");

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

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

ОБНОВЛЕНИЕ: с webpack 2 вам нужно использовать экспонирование-загрузчик вместо выставить:

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

Ответ 2

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

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

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

Ответ 3

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

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

window.$ = window.JQuery = JQuery;

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

Обновление для 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" }
        ]
    }
};

(из документы-экспоненты-загрузчики)

Ответ 7

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

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

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

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

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

window.$ = window.jQuery = $