वेब पैक के साथ वास्तविक विंडो ऑब्जेक्ट के लिए jQuery का पर्दाफाश करें

Question

मैं jQuery ऑब्जेक्ट को वैश्विक विंडो ऑब्जेक्ट के लिए उजागर करना चाहता हूं जो ब्राउज़र में डेवलपर कंसोल के अंदर पहुंच योग्य है। अब मेरे वेबपैक विन्यास में मेरे पास निम्नलिखित पंक्तियाँ हैं:

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

ये लाइनें मेरे वेबपैक मॉड्यूल में प्रत्येक फ़ाइल में jQuery की परिभाषाएँ जोड़ती हैं। लेकिन जब मैं प्रोजेक्ट का निर्माण करता हूं और डेवलपर कंसोल में jQuery को इस तरह एक्सेस करने की कोशिश करता हूं:

window.$;
window.jQuery;

यह कहता है कि ये गुण अपरिभाषित हैं ...

क्या इसे ठीक करने का कोई तरीका है?

Comments

क्या मैं this: 'window'भी सेट कर सकता हूं ? चूँकि कई पुस्तकालयों को thisचर वस्तु मान

— लेते हैं

Answer 1

आपको एक्सपोजर-लोडर का उपयोग करने की आवश्यकता है ।

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: '$'
        }]
    }]
}

Comments

ProvidePluginमुख्य रूप से स्थितियों में इस्तेमाल किया जहां तीसरे पक्ष के पुस्तकालयों एक वैश्विक चर की उपस्थिति पर भरोसा करना चाहिए।

— जोहान्स एलावड

मैंने गलत धारणा बनाई कि प्रश्न 'आलसी' उद्देश्यों के लिए प्रदान करने वाले प्लगइन का उपयोग कर रहा था जिसे मैंने ऑनलाइन बहुत देखा है लेकिन आप सही हैं :)

— मैट डेरिक

यह वही है जो मैं देख रहा था और बस आगे जोड़ने के लिए, लोडर के लिए, आप इसे एक पंक्ति में भी कर सकते हैं:{test: /jquery\.js$/, loader: 'expose?jQuery!expose?$'}

— फर्नांडो

क्या आप केवल एक पहली स्क्रिप्ट नहीं जोड़ सकते हैं $ = require('jquery'); window.jQuery = $; window.$ = $;? (जरूरत नहीं expose-loader)

— हरमन

के अनुसार पर्दाफाश-लोडर GitHub पेज webpack 2 वाक्य रचना के रूप में है इस प्रकार है: module: { rules: [{ test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: 'jQuery' },{ loader: 'expose-loader', options: '$' }] }] }। यह एकमात्र तरीका है जिससे मैं jQuery उजागर कर सकता हूं और यह नए मॉड्यूल . rules सिंटैक्स का उपयोग कर रहा है ।

— गैविन सदरलैंड

Answer 2

ProvPlugin संबंधित आयात के माध्यम से किसी अन्य स्रोत में एक प्रतीक की जगह लेता है, लेकिन वैश्विक नाम स्थान पर प्रतीक को उजागर नहीं करता है। एक क्लासिक उदाहरण jQuery प्लगइन्स हैं। उनमें से ज्यादातर jQueryविश्व स्तर पर परिभाषित होने की उम्मीद करते हैं। साथ ProvidePluginआप यह सुनिश्चित करें कि jQuery निर्भरता (जैसे पहले लोड) और की घटना है बनाना होगा jQueryमें अपने कोड की webpack कच्चे बराबर के साथ प्रतिस्थापित किया जाएगा require('jquery')।

यदि आपके पास बाहरी नाम हैं जो वैश्विक नामस्थान में होने के लिए प्रतीक पर निर्भर हैं (जैसे आइए बाह्य रूप से होस्ट किए गए जेएस कहते हैं, सेलेनियम में जावास्क्रिप्ट कॉल करते हैं या केवल ब्राउज़र के कंसोल में प्रतीक तक पहुंचते हैं) तो आप expose-loaderइसके बजाय उपयोग करना चाहते हैं ।

संक्षेप में: ProvPlugin वैश्विक प्रतीकों के लिए समय-निर्भरता का expose-loaderप्रबंधन करता है जबकि प्रबंधन वैश्विक प्रतीकों के लिए क्रमिक निर्भरता का प्रबंधन करता है।

Comments

स्पष्टीकरण के लिए धन्यवाद

— Foton

आधिकारिक डॉक्स से वेबपैक के साथ ProvPlugin उदाहरण: webpack.js.org/plugins/provide-plugin/#usage-jquery

— जेम्स जेंट्स

Answer 3

ऐसा लगता है कि windowऑब्जेक्ट सभी मॉड्यूल में उजागर हुआ है।

आयात / आवश्यकता क्यों नहीं JQueryडालनी चाहिए:

window.$ = window.JQuery = JQuery;

आपको यह सुनिश्चित करने की आवश्यकता होगी कि ऐसा करने वाले किसी भी मॉड्यूल की आवश्यकता / आयात करने से पहले ऐसा होता है window.JQuery, या तो आवश्यक मॉड्यूल में या उस मॉड्यूल में जहां इसका उपयोग किया जा रहा है।

Comments

एक नई निर्भरता को जोड़ने के बिना सबसे आसान समाधान। धन्यवाद!

— 15

वैरिएबल का उपयोग करके अन्य नेस्टेड मॉड्यूल्स को काम नहीं किया जाएगा, बस 'परिभाषित नहीं'

— aboutqx

वैसे यह तब काम करता है जब उपयोग requireन होimport

— aboutqx

@aboutqx आप क्या मतलब है यकीन नहीं है। मेरे उत्तर ने मान लिया कि JQuery को पहले से ही आयात किया गया है / आवश्यक है और नामित चर को सौंपा गया है JQuery।

— मुहस

@ जब आप उपयोग करते हैं import, तो आप त्रुटि प्राप्त कर सकते हैं, क्योंकि importफ़ाइल के शीर्ष पर क्रमबद्ध हो जाते हैं, और requireवे जहां रखे गए थे, वहां रहें। तो रन-ऑर्डर केवल तभी बदलता है importजब विंडो वेरिएबल सेट नहीं होता है।

— लगभग '

Answer 4

इसने हमेशा मेरे लिए काम किया। वेबपैक 3 के लिए भी शामिल है window.$ = window.jQuery = require("jquery");

Comments

सबसे अच्छा उपाय ! 2018

— waz123

Answer 5

उपरोक्त में से किसी ने भी मेरे लिए काम नहीं किया। (और मुझे वास्तव में एक्सपोजर-लोडर सिंटैक्स पसंद नहीं है)। बजाय,

मैंने webpack.config.js में जोड़ा:

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

सभी मॉड्यूल की तुलना में $ jQuery के माध्यम से पहुंच है।

आप वेबपैक द्वारा बंडल किए गए अपने किसी भी मॉड्यूल में निम्न जोड़कर इसे खिड़की से उजागर कर सकते हैं:

window.$ = window.jQuery = $

Comments

यह मेरे लिए पर्दे के पीछे

— वेबपैक

Answer 6

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

( एक्सपोजर-लोडर डॉक्स से )

Comments

अब मैं वेबपैक के किसी भी संस्करण में काम करने के लिए इसे प्राप्त नहीं कर सकता। यकीन नहीं है कि क्या बदल गया है, लेकिन एकमात्र तरीका जिससे मुझे jQuery या $ की मान्यता मिल सकती हैwindow.jQuery = require('jquery');

— trpt4him

Answer 7

मेरे मामले में काम करता है

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