Викрийте jQuery справжньому об'єкту Window за допомогою Webpack

Я хочу відкрити об’єкт jQuery глобальному об'єкту вікна, який доступний всередині консолі розробника у браузері. Тепер у моєму конфігурації веб-упаковки є такі рядки:

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

Ці рядки додають визначення jQuery до кожного файлу в моїх модулях веб-упаковки. Але коли я будую проект і намагаюся отримати доступ до jQuery на консолі розробника так:

window.$;
window.jQuery;

це говорить про те, що ці властивості не визначені ...

Чи є спосіб це виправити?

Вам потрібно використовувати експонатор-завантажувач .

npm install expose-loader --save-dev

Ви можете це зробити, коли цього вимагаєте:

require("expose?$!jquery");

або ви можете зробити це у своєму конфігурації:

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

ОНОВЛЕННЯ : Станом на веб-пакет 2, вам потрібно використовувати експонатор-завантажувач замість експозиції :

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

Додаток ProvidePlugin замінює символ у іншому джерелі через відповідний імпорт, але не виставляє символ у глобальному просторі імен. Класичний приклад - плагіни jQuery. Більшість із них просто розраховують jQueryвизначитися глобально. За допомогою цього ProvidePluginви переконаєтесь, що jQuery - це залежність (наприклад, завантажена раніше), а виникнення jQueryїх коду буде замінено на еквівалент webpack require('jquery').

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

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

Схоже, windowоб’єкт виставлений у всіх модулях.

Чому б не просто імпортувати / вимагати JQueryта ставити:

window.$ = window.JQuery = JQuery;

Вам потрібно буде переконатися, що це відбувається перед тим, як вимагати / імпортувати будь-який модуль, який використовує window.JQuery, або в потрібному модулі, або в модулі, де він використовується.

Це завжди працювало для мене. у тому числі для веб- пакета 3 window.$ = window.jQuery = require("jquery");

Ніщо з перерахованого вище не працювало для мене. (і мені дуже не подобається синтаксис експонатора-завантажувача). Натомість

Я додав до webpack.config.js:

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

Тоді всі модулі мають доступ через jQuery через $.

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

window.$ = window.jQuery = $

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

Встановіть експозиційний завантажувач, як описано Меттом Дерріком:

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" }
        ]
    }
};

(з документів експозиційного завантажувача )

У моєму випадку працює

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