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

Question

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

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

plugins: [

                new webpack.ProvidePlugin({

                    $: 'jquery',

                    jQuery: 'jquery'

                })

            ]

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

window.$;

window.jQuery;

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

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

614 6

jQuery javascript webpack

6 ответов:

Comments

Ничего не найдено.

Matt Derrick · Accepted Answer · 2017-07-20 15:53:37

вы должны использовать expose-loader.
npm install expose-loader --save-dev
вы можете либо сделать это, когда вам это нужно:
require("expose?$!jquery");
или вы можете сделать это в ваш конфиг:
loaders: [
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]
обновление: начиная с webpack 2, вы должны использовать expose-loader вместо разоблачение:
module: {
    rules: [{
        test: require.resolve('jquery'),
        use: [{
            loader: 'expose-loader',
            options: '$'
        }]
    }]
}

Joscha · Accepted Answer · 2015-06-10 23:30:59

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

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

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

mhess · Accepted Answer · 2017-01-13 19:02:27

выглядит window объект отображается во всех модулях.

почему бы просто не импортировать/требуется JQuery и поставить:
window.$ = window.JQuery = JQuery;
в вашем модуле точки входа?

SharpCoder · Accepted Answer · 2017-07-30 23:51:26

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

FeDev · Accepted Answer · 2016-06-23 22:45:26

в моем случае работает
{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" } 

Cologne_Muc · Accepted Answer · 2017-03-01 16:19:55

обновление для 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 docs)