ওয়েবপ্যাকের সাহায্যে jQueryটিকে বাস্তব উইন্ডো অবজেক্টে প্রকাশ করুন

111

আমি ব্রাউজারে বিকাশকারী কনসোলের ভিতরে অ্যাক্সেসযোগ্য গ্লোবাল উইন্ডো অবজেক্টে jQuery অবজেক্টটি প্রকাশ করতে চাই। এখন আমার ওয়েবপ্যাক কনফিগারেশনে আমার নীচের লাইন রয়েছে:

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

এই লাইনগুলি আমার ওয়েবপ্যাক মডিউলগুলির প্রতিটি ফাইলে jQuery সংজ্ঞা যুক্ত করে। তবে যখন আমি প্রকল্পটি তৈরি করি এবং এর মতো বিকাশকারী কনসোলে jQuery অ্যাক্সেস করার চেষ্টা করব:

window.$;
window.jQuery;

এটি বলে যে এই বৈশিষ্ট্যগুলি অপরিশোধিত ...

এই সমাধানের জন্য একটি উপায় আছে কি?

javascript jquery webpack

— ferbolg
সূত্র

1

আমি কি সেট this: 'window'করতে পারি ? যেহেতু অনেক লাইব্রেরি thisভেরিয়েবলটিকে উইন্ডো অবজেক্ট হিসাবে ধরে নিয়েছে

— অভিনব সিঙ্গি

129

আপনাকে এক্সপোজ-লোডার ব্যবহার করতে হবে ।

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

— ম্যাট ডেরিক
সূত্র

11

ProvidePluginপ্রাথমিকভাবে পরিস্থিতিতে ব্যবহার যেখানে তৃতীয় পক্ষের লাইব্রেরি একটি বিশ্বব্যাপী পরিবর্তনশীল উপস্থিতিতে উপর নির্ভর করা উচিত নয়।

— জোহানেস ইয়াল্ড

প্রশ্নটি 'অলস' উদ্দেশ্যে সরবরাহের প্লাগইনটি ব্যবহার করে যা আমি খুব বেশি অনলাইনে দেখেছি কিন্তু আপনি সঠিক তা ভুল ধারণাটি তৈরি করেছেন :)

— ম্যাট ডেরিক

8

এটি হ'ল আমি যা খুঁজছিলাম এবং কেবলমাত্র যুক্ত করার জন্য, লোডারদের জন্য, আপনি এটি এক লাইনেও করতে পারেন:{test: /jquery\.js$/, loader: 'expose?jQuery!expose?$'}

— ফার্নান্দো

8

আপনি কি প্রথম স্ক্রিপ্টটি যুক্ত করতে পারবেন না $ = require('jquery'); window.jQuery = $; window.$ = $;? (প্রয়োজন নেই expose-loader)

— Herman

1

মতে এক্সপোজ-লোডার GitHub পৃষ্ঠা webpack 2 সিনট্যাক্স হিসাবে অনুসরণ করে:

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

। আমি jQuery উন্মুক্ত করতে পারার একমাত্র উপায় এবং এটি নতুন মডিউল.রুলস সিনট্যাক্স ব্যবহার করছে ।

— গ্যাভিন সোদারল্যান্ড

84

ProvidePlugin সংশ্লিষ্ট আমদানির মাধ্যমে অন্য উত্সে প্রতীককে প্রতিস্থাপন করে, তবে বৈশ্বিক নেমস্পেসে প্রতীকটি প্রকাশ করে না। একটি ক্লাসিক উদাহরণ jQuery প্লাগইন। তাদের বেশিরভাগই jQueryবিশ্বব্যাপী সংজ্ঞায়িত হওয়ার প্রত্যাশা করে। এর সাহায্যে ProvidePluginআপনি নিশ্চিত করবেন যে jQuery একটি নির্ভরতা (যেমন আগে লোড হওয়া) এবং jQueryতাদের কোডের উপস্থিতি ওয়েবপ্যাকের কাঁচা সমতুল্যর সাথে প্রতিস্থাপিত হবে require('jquery')।

গ্লোবাল নেমস্পেসে থাকার জন্য আপনার যদি বহিরাগত স্ক্রিপ্টগুলি প্রতীকের উপর নির্ভর করে থাকে (যেমন একটি বাহ্যিকভাবে হোস্ট করা জেএস বলি, জাভাস্ক্রিপ্ট সেলেনিয়ামে কল করে বা কেবল ব্রাউজারের কনসোলে প্রতীকটি অ্যাক্সেস করে) আপনি তার expose-loaderপরিবর্তে ব্যবহার করতে চান ।

সংক্ষেপে: ProvidePlugin গ্লোবাল প্রতীকগুলিতে বিল্ড-টাইম নির্ভরতা expose-loaderপরিচালনা করে যেখানে বিশ্বব্যাপী প্রতীকগুলিতে রানটাইম নির্ভরতা পরিচালনা করে।

— Joscha
সূত্র

2

ব্যাখ্যার জন্য ধন্যবাদ

— ফোটন

অফিসিয়াল ডক্স থেকে ওয়েবপ্যাকের সাথে প্লাগইনের উদাহরণ সরবরাহ করুন: webpack.js.org/plugins/provide-plugin/#usage-jquery

— জেমস জেনেটস

33

দেখে মনে হচ্ছে windowঅবজেক্টটি সমস্ত মডিউলে প্রকাশিত হয়েছে।

কেন কেবল আমদানি / প্রয়োজনীয় JQueryএবং রাখেনি:

window.$ = window.JQuery = JQuery;

আপনার window.JQueryপ্রয়োজনীয় আবশ্যক মডিউলে বা এটি ব্যবহৃত হচ্ছে এমন মডিউলে যে কোনও মডিউল ব্যবহার করার প্রয়োজন / আমদানি করার আগে এটি ঘটতে হবে তা নিশ্চিত করতে হবে ।

— mhess
সূত্র

নতুন নির্ভরতা যুক্ত না করে সহজ সমাধান। ধন্যবাদ!

— fatihpense

এটি ভেরিয়েবলটি ব্যবহার করে অন্যান্য নেস্টেড মডিউলগুলি চালিত করবে না, কেবল 'সংজ্ঞায়িত নয়'

— প্রায়

4

requireimport

— নাহয়

@aboutqx আপনার অর্থ কী তা নিশ্চিত নয়। আমার উত্তর ধরে নিয়েছে যে জিকুয়েরি ইতিমধ্যে আমদানি করা / প্রয়োজনীয় এবং নামটির একটি ভেরিয়েবলকে অর্পণ করা হয়েছে JQuery।

— মেস

2

@ যখন আপনি ব্যবহার করবেন তখন আপনি importত্রুটি পেতে পারেন, কারণ importফাইলটির শীর্ষে সারণি হয়ে যায় এবং requireসেগুলি যেখানে রাখা হয়েছিল সেখানেই থাকুন। সুতরাং রান-অর্ডার কেবল তখনই পরিবর্তিত হয় importযখন উইন্ডো ভেরিয়েবল সেট না করা থাকে।

— aboutqx

16

এটি সর্বদা আমার পক্ষে কাজ করে। ওয়েবপ্যাক 3 সহ window.$ = window.jQuery = require("jquery");

— SharpCoder
সূত্র

2

সব থেকে ভালো সমাধান ! 2018

— waza123

6

উপরের কেউই আমার পক্ষে কাজ করেনি। (এবং আমি এক্সপোজ-লোডার সিনট্যাক্সটি সত্যিই পছন্দ করি না)। পরিবর্তে,

আমি webpack.config.js এ যুক্ত করেছি:

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

Qu এর মাধ্যমে jQuery এর মাধ্যমে সমস্ত মডিউল অ্যাক্সেস করতে পারে $

ওয়েবপ্যাক দ্বারা বান্ডিল করা আপনার যে কোনও মডিউলটিতে নিম্নলিখিতটি যুক্ত করে আপনি এটি উইন্ডোতে প্রকাশ করতে পারেন:

window.$ = window.jQuery = $

— এন্টোইন ভিও
সূত্র

1

এই পর্দার আড়ালে ওয়েবপ্যাক-স্ট্রিম ব্যবহার করে আমার জন্য কাজ করেছে

— ক্লিভিস

1

ওয়েবপ্যাক ভি 2 এর জন্য আপডেট

ম্যাট ডেরিকের বর্ণনা অনুযায়ী এক্সপোজ-লোডার ইনস্টল করুন :

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

( এক্সপোজ-লোডার ডক্স থেকে )

— Cologne_Muc
সূত্র

ওয়েবপ্যাকের কোনও সংস্করণে কাজ করতে আমি আর এটি পেতে পারি না। নিশ্চিত নন কি পরিবর্তন হয়েছে কিন্তু একমাত্র উপায় আমি jQuery পেতে পারেন অথবা $ স্বীকৃত হতে করাই হলwindow.jQuery = require('jquery');

— trpt4him

0

আমার ক্ষেত্রে কাজ করে

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

— FeDev
সূত্র