ওয়েবপ্যাকটিতে jQuery প্লাগইন নির্ভরতা পরিচালনা করা

Question

আমি আমার অ্যাপ্লিকেশনটিতে ওয়েবপ্যাকটি ব্যবহার করছি, যার মধ্যে আমি দুটি জাভাস্ক্রিপ্ট ফাইল / কোডের জন্য বান্ডেল.জেএস এবং জিকুয়েরি এবং প্রতিক্রিয়ার মতো সমস্ত লাইব্রেরির জন্য বিক্রেতার.জেএস তৈরি করি two প্লাগইনগুলি যেমন jQuery রয়েছে তাদের নির্ভরতা হিসাবে ব্যবহার করার জন্য আমি কী করব এবং আমি সেগুলি বিক্রেতার.জেজেও রাখতে চাই? যদি এই প্লাগইনগুলির একাধিক নির্ভরতা থাকে?

বর্তমানে আমি এই jQuery প্লাগইনটি এখানে ব্যবহার করার চেষ্টা করছি - https://github.com/mbklein/jquery-elastic । ওয়েবপ্যাক ডকুমেন্টেশনে প্লাগিন এবং আমদানি-লোডার সরবরাহের উল্লেখ রয়েছে । আমি সরবরাহ প্লাগিন ব্যবহার করেছি, তবে এখনও jQuery অবজেক্ট উপলব্ধ নেই। এখানে আমার ওয়েবপ্যাক.কমফিগ.জেগুলি দেখতে কেমন-

var webpack = require('webpack');
var bower_dir = __dirname + '/bower_components';
var node_dir = __dirname + '/node_modules';
var lib_dir = __dirname + '/public/js/libs';

var config = {
    addVendor: function (name, path) {
        this.resolve.alias[name] = path;
        this.module.noParse.push(new RegExp(path));
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jquery: "jQuery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
    ],
    entry: {
        app: ['./public/js/main.js'],
        vendors: ['react','jquery']
    },
    resolve: {
        alias: {
            'jquery': node_dir + '/jquery/dist/jquery.js',
            'jquery.elastic': lib_dir + '/jquery.elastic.source.js'
        }
    },
    output: {
        path: './public/js',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'jsx-loader' },
            { test: /\.jquery.elastic.js$/, loader: 'imports-loader' }
        ]
    }
};
config.addVendor('react', bower_dir + '/react/react.min.js');
config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js');
config.addVendor('jquery.elastic', lib_dir +'/jquery.elastic.source.js');

module.exports = config;

তবে এটি সত্ত্বেও, এটি ব্রাউজার কনসোলে এখনও একটি ত্রুটি ছুঁড়েছে:

আনকড রেফারেন্স এরিয়ার: jQuery সংজ্ঞায়িত করা হয় না

একইভাবে, আমি যখন আমদানি-লোডার ব্যবহার করি তখন এটি একটি ত্রুটি ফেলে দেয়,

প্রয়োজন সংজ্ঞায়িত করা হয় না '

এই লাইনে:

var jQuery = require("jquery")

যাইহোক, আমি যখন আমার vendors.js ফাইলে এটি যুক্ত না করি তখন আমি একই প্লাগইনটি ব্যবহার করতে পারি এবং তার পরিবর্তে এটি আমার অন্যান্য জাভাস্ক্রিপ্ট কোড ফাইলগুলিকে কীভাবে অন্তর্ভুক্ত করে তা স্বাভাবিক এএমডি পদ্ধতিতে প্রয়োজন হয়-

define(
[
    'jquery',
    'react',
    '../../common-functions',
    '../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
    $("#myInput").elastic() //It works

});

তবে এটি আমি যা করতে চাই তা নয়, কারণ এর অর্থ হ'ল jquery.elastic.source.js আমার জাভাস্ক্রিপ্ট কোডটি বান্ডেল.জেজে বান্ডিল করা হয়েছে এবং আমি চাই আমার সমস্ত jQuery প্লাগইনগুলি বিক্রেতার.জেএস বান্ডলে থাকুক। তাহলে আমি কীভাবে এটি অর্জন করতে যাব?

Comments

নিশ্চিত না যে এটি আপনার সমস্যা কিনা তবে আপনার অবশ্যই উইন্ডোজ.জিক্যুরিটি "উইন্ডোজ.জিকিউরি": "জ্যাকুয়ারি" এ পরিবর্তন করতে হবে। ওয়েবপ্যাকের ওয়েবসাইটে একটি টাইপো রয়েছে যেখানে আমি ধরে নিচ্ছি যে আপনি কোডটি পেয়েছেন।

— অ্যালেক্স হকিন্স

@ অ্যালেক্সহকিন্স ওহ হ্যাঁ, আমি এটি লক্ষ্য করেছি এবং এটি ঠিক করেছি। এটা ইশারা জন্য ধন্যবাদ!

— বুলেটহান্টার 26'15

Answer 1

উত্তরাধিকারী বিক্রেতা মডিউলগুলিকে কীভাবে অন্তর্ভুক্ত করবেন আপনি বিভিন্ন পদ্ধতির মিশ্রণ করেছেন। এইভাবে আমি এটি মোকাবেলা করব:

1. অবিহীন কমনজেএস / এএমডি ওভার পছন্দ করুন dist

বেশিরভাগ মডিউলগুলি তাদের ক্ষেত্রে distসংস্করণটিকে যুক্ত mainকরে package.json। যদিও এটি বেশিরভাগ বিকাশকারীদের জন্য দরকারী, ওয়েবপ্যাকের জন্য srcসংস্করণটি উপন্যাস করা ভাল, কারণ এইভাবে ওয়েবপ্যাকটি নির্ভরতা আরও ভাল করতে সক্ষম করে (যেমন ব্যবহার করার সময় DedupePlugin)।

// webpack.config.js

module.exports = {
    ...
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};

তবে বেশিরভাগ ক্ষেত্রে distসংস্করণটি ঠিক ঠিক কাজ করে।

---

২. ProvidePluginঅন্তর্নিহিত গ্লোবালগুলি ইনজেক্ট করতে ব্যবহার করুন

বেশিরভাগ লিগ্যাসি মডিউলগুলি নির্দিষ্ট গ্লোবালের উপস্থিতিতে নির্ভর করে, যেমন জিকুয়েরি প্লাগইনগুলি ব্যবহার করে $বা করে jQuery। এই দৃশ্যে আপনি ওয়েবপ্যাকটি কনফিগার করতে পারেন, প্রতিবারের জন্য var $ = require("jquery")এটি বৈশ্বিক $শনাক্তকারীর মুখোমুখি হয়ে যায় end

var webpack = require("webpack");

    ...

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

---

৩. কনফিগার করতে আমদানি-লোডার ব্যবহার করুনthis

কিছু লিগ্যাসি মডিউলগুলি বস্তু thisহওয়ার উপর নির্ভর করে window। এটি একটি সমস্যা হয়ে দাঁড়ায় যখন মডিউলটি একটি কমনজেএস প্রসঙ্গে কার্যকর হয় যেখানে thisসমান হয় module.exports। এই ক্ষেত্রে আপনি আমদানি-লোডারthis দিয়ে ওভাররাইড করতে পারেন ।

দৌড়াও npm i imports-loader --save-devতারপর

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?this=>window"
        }
    ]
}

আমদানি-লোডারটি ম্যানুয়ালি সমস্ত ধরণের ভেরিয়েবল ইনজেক্ট করতে ব্যবহার করা যেতে পারে। ProvidePluginঅন্তর্নিহিত গ্লোবালগুলির ক্ষেত্রে বেশিরভাগ সময় সময়টি বেশি কার্যকর useful

---

৪. এএমডি অক্ষম করতে আমদানি-লোডার ব্যবহার করুন

এমন মডিউল রয়েছে যা বিভিন্ন মডিউল শৈলীর সমর্থন করে যেমন এএমডি, কমনজেএস এবং উত্তরাধিকার। তবে, বেশিরভাগ সময় তারা প্রথমে অনুসন্ধান করে defineএবং তারপরে সম্পত্তি রফতানি করতে কিছু বিচক্ষণ কোড ব্যবহার করে। এই ক্ষেত্রে, এটি সেট করে সাধারণ জেএস পথে জোর করতে সহায়তা করতে পারে define = false।

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?define=>false"
        }
    ]
}

---

৫. স্ক্রিপ্টগুলি বিশ্বব্যাপী আমদানি করতে স্ক্রিপ্ট-লোডার ব্যবহার করুন

আপনি যদি গ্লোবাল ভেরিয়েবলগুলির বিষয়ে চিন্তা করেন না এবং কেবলমাত্র লিগ্যাসি স্ক্রিপ্টগুলি কাজ করতে চান তবে আপনি স্ক্রিপ্ট-লোডারও ব্যবহার করতে পারেন। এটি বিশ্বব্যাপী প্রেক্ষাপটে মডিউলটি কার্যকর করে, যেমন আপনি <script>ট্যাগের মাধ্যমে এগুলি অন্তর্ভুক্ত করেছিলেন ।

---

noParseLarge. বড় বড় ডিসট অন্তর্ভুক্ত করতে ব্যবহার করুন

যখন মডিউলটির কোনও এএমডি / কমনজেএস সংস্করণ না থাকে এবং আপনি এটি অন্তর্ভুক্ত করতে চান dist, আপনি এই মডিউলটিকে এই হিসাবে পতাকাঙ্কিত করতে পারেন noParse। তারপরে ওয়েবপ্যাকটি কেবলমাত্র মডিউলটিকে পার্সিং ছাড়াই অন্তর্ভুক্ত করবে, যা বিল্ড সময়কে উন্নত করতে ব্যবহার করা যেতে পারে। এর অর্থ হ'ল এএসটির প্রয়োজন মতো যে কোনও বৈশিষ্ট্য ProvidePluginকাজ করবে না।

module: {
    noParse: [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]
}

Comments

ProvidePluginসমস্ত ফাইল দেওয়া শনাক্তকারী সব ঘটনার উপর প্রয়োগ করা হয়। imports-loaderশুধুমাত্র নির্দিষ্ট ফাইল প্রয়োগ করা যেতে পারে, কিন্তু আপনি একই ভেরিয়েবল / নির্ভরতা জন্য উভয় ব্যবহার করা উচিত নয়।

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

আমি এতে বিভ্রান্ত আসলে jquery কোথা থেকে আসছে? স্থানীয়ভাবে নাকি সিডিএন? ৩. এর পরে সমস্ত কিছু এটি প্রয়োজনীয় কিনা তা অস্পষ্ট। ওয়েবপ্যাক ব্যবহার করে আপনার প্রকল্পে jquery একীকরণের আসল পদক্ষেপগুলি কি? এটি সিডিএন এর মাধ্যমে উপলভ্য সংস্করণটিকে বাইপাস করে?

— হেল্পমিস্ট্যাক ওভারফ্লোমাইঅনলি হপ

সিডিএন থেকে সমস্ত কিছু ওয়েবপ্যাকের সুযোগের বাইরে নয়, তাই এটি স্থানীয় জেকুরি ইনস্টলেশনটিকে বোঝায়। জ্যাকোয়ারি কেবল প্রয়োজন হতে পারে, এটি সংহত করার জন্য কোনও বিশেষ পদক্ষেপের প্রয়োজন নেই। এই প্রশ্নটি কীভাবে বিশ্বব্যাপী $ভেরিয়েবলের উপর নির্ভরশীল jquery প্লাগইনগুলি একীভূত করতে পারে সে সম্পর্কে ।

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

এই সব কি, এখনও কাজ করে না; তারপরে যুক্ত: "module": { "loaders": [ { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },এবং এটি দুর্দান্ত কাজ করেছে।

— musicformellons

শুধু একটি jquery প্যাকেজ অন্তর্ভুক্ত করার জন্য এই সব কি ?, কি ব্যথা। আমি আমার গাল্প বিল্ডে ফিরে যাচ্ছি

— রাহুল গুপ্ত

Answer 2

Jquery এ বিশ্বব্যাপী অ্যাক্সেসের জন্য বিভিন্ন বিকল্প বিদ্যমান। আমার অতি সাম্প্রতিক ওয়েবপ্যাক প্রকল্পে, আমি জ্যাকুরিতে বিশ্বব্যাপী অ্যাক্সেস চেয়েছিলাম তাই আমি আমার প্লাগইন ঘোষণাগুলিতে নিম্নলিখিতগুলি যুক্ত করেছি:

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

এর অর্থ হ'ল জ্যাকোয়ারি জাভাস্ক্রিপ্ট উত্স কোডের মধ্যে থেকে বৈশ্বিক রেফারেন্স j এবং jQuery এর মাধ্যমে অ্যাক্সেসযোগ্য।

অবশ্যই, আপনাকে এনপিএমের মাধ্যমে jquery ইনস্টল করতে হবে:

$ npm i jquery --save

এই পদ্ধতির কার্যকারী উদাহরণের জন্য দয়া করে গিথুবটিতে আমার অ্যাপ্লিকেশনটি কাঁটাচামচ করুন

Comments

আপনি যদি ভোটের কারণটি ব্যাখ্যা করে ডাউনগ্রেড করেন তবে দয়া করে আপনি কোনও মন্তব্য করতে পারেন। উপরের তথ্যটি সঠিক। উপরোক্ত পদ্ধতির সাহায্যে দয়া করে আমার ওয়ার্কিং অ্যাপটি দেখুন: github.com/arcseldon/react-babel-webpack-starter-app এ ।

— আর্সেল্ডন

আমি ডাউনভোটার নই, তবে সম্ভবত এটি কারণ ProvidePluginআপনি প্রস্তাবিত সমাধানটি ইতিমধ্যে প্রস্তাবিত হয়েছিল?

— Léo Lam

@ লওলাম - আপনার মন্তব্যের জন্য ধন্যবাদ আপনার বক্তব্যটির প্রশংসা করুন - আমি পৃথক অনুসন্ধানের মাধ্যমে উত্তরটি কমিয়ে দিয়েছি এবং স্নিপেটটি এখানে ভাগ করে নিয়েছি আমার মনে হয়েছিল যে আমি যা করেছি তা অনুকরণ করতে ইচ্ছুক অন্যদের সাথে সম্ভবত সবচেয়ে প্রাসঙ্গিক। আপনি ঠিক বলেছেন, সরকারী উত্তরটি এই বিকল্পটি কভার করে।

— আর্সেল্ডন

এটি কাজ করছে তবে আমি ২ টি সতর্কতা পেয়েছি: ./~/jQuery/dist/jquery.js There is another module with an equal name when case is ignored.এবং একই সাথে./~/jquery/dist/jquery.js

— পিস্তো

'window.jQuery': 'jquery'এমএস-সিগন্যালার-ক্লায়েন্ট এনপিএম প্যাকেজ লোড তৈরি করতে আমার সেই তালিকায় যুক্ত হওয়া দরকার । আমিও 'window.$': 'jquery'ভাল পরিমাপের জন্য রেখেছি :)

— সামি

Answer 3

আপনি যা করতে চাইছেন তা আমি খুব ভালভাবে বুঝতে পেরেছি কিনা জানি না, তবে আমার jQuery প্লাগইনগুলি ব্যবহার করতে হয়েছিল যা জিকুয়েরিকে বিশ্বব্যাপী প্রসঙ্গে (উইন্ডো) থাকতে হবে এবং আমি নিম্নলিখিতটি আমার মধ্যে রেখেছি entry.js:

var $ = require('jquery');
window.jQuery = $;
window.$ = $;

আমি যেখানেই চাই jqueryplugin.min.jsএবং window.$কেবলমাত্র প্রত্যাশার মতো প্লাগইনটি দিয়ে প্রসারিত করতে হবে।

Comments

মূলত আমি NoParse শর্তের সাথে ProvidePlugin ব্যবহার করার ভুল করেছিলাম। ProvidePlugin এর মতো প্লাগইন যদি আমরা NoParse না করি তবে কাজ করে না, যেমনটি উত্তরের point নং পয়েন্টে বলেছে। আপনি

— কোডটিতে

হ্যাঁ, আমি খুঁজে পেয়েছি যে প্লাগইন সরবরাহের চেয়ে প্লাগিনগুলি জুড়ে আরও ধারাবাহিকভাবে কাজ করে ... এসএসপি যদি আপনি স্ক্রিপ্ট-লোডার মাধ্যমে কৌণিক 1.x এনে থাকেন তবে।

— ট্র্যাকার 1

Answer 4

এক্সপোজার করার সময় $এবং jQueryওয়েবপ্যাক ৩.৮.১ এবং এর সাথে বৈশ্বিক ভেরিয়েবল হিসাবে জিনিসগুলি ভালভাবে কাজ করতে পেলাম ।

প্রকল্প নির্ভরতা হিসাবে jQuery ইনস্টল করুন। আপনি @3.2.1সর্বশেষতম সংস্করণ ইনস্টল করতে বা অন্য সংস্করণ নির্দিষ্ট করতে বাদ দিতে পারেন।

npm install --save jquery@3.2.1

expose-loaderইতিমধ্যে ইনস্টল না থাকলে বিকাশ নির্ভরতা হিসাবে ইনস্টল করুন ।

npm install expose-loader --save-dev

আমাদের জন্য jQuery লোড এবং এক্সপোজ করতে ওয়েবপ্যাকটি কনফিগার করুন।

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  entry: [
    // entry bits
  ],
  output: {
    // output bits
  },
  module: {
    rules: [
      // any other rules
      {
        // Exposes jQuery for use outside Webpack build
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      }
    ]
  },
  plugins: [
    // Provides jQuery for other JS bundled with Webpack
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

Comments

আপনি এটি উল্লেখ করতে ভুলে গিয়েছিলেন যে expose-loaderএটি সঠিকভাবে কাজ করার জন্য আপনাকে ইনস্টল করতে হবে npm install expose-loader --save-dev

— পাওলো গ্রিয়েটনার

এটি আমার জন্য কাজ করেছে 👍 jQuery: 3.3.1, এক্সপোজ-লোডার: 0.7.5, webpack: 4.20.2

— AKT

expose-loadedআমার জন্য এটি করেনি। সংকলনের সময় আমি ত্রুটি পাই নি, তবে ক্রোম বিকাশকারী সরঞ্জামগুলিতে। এখনই সমাধান হয়েছে।

— জোহান ভার্জিয়ার

ধন্যবাদ! এটি "jquery": "^ 3.4.1", এবং "ওয়েবপ্যাক": "^ 4.41.5" নিয়ে কাজ করেছে। এটি কি আমি বা ওয়েবপ্যাকের সাথে কাজ করার জন্য jQuery পাওয়া এই হাস্যকর হওয়া উচিত নয়?

— কার্লস অ্যালকোলেয়া

Answer 5

এটিকে ওয়েবপ্যাককনফিগ.জেজে আপনার প্লাগইন অ্যারে যুক্ত করুন

new webpack.ProvidePlugin({
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
})

তারপরে সাধারণত jquery প্রয়োজন

require('jquery');

ব্যথা যদি এটিকে দেখার জন্য অন্যান্য স্ক্রিপ্টগুলি ধরে রাখে তবে তা স্পষ্ট করে বিশ্ব প্রসঙ্গে রাখার চেষ্টা করুন (এন্ট্রি জেএসের মাধ্যমে)

window.$ = jQuery;

Answer 6

আপনার ওয়েবপ্যাক.কমফিগ.জেএস ফাইলটিতে নীচে যুক্ত করুন:

 var webpack = require("webpack");
 plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ],

এনপিএম ব্যবহার করে jQuery ইনস্টল করুন:

$ npm i jquery --save

App.js ফাইলটিতে লাইনের নিচে যুক্ত করুন:

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

এটি আমার পক্ষে কাজ করেছে। :)

Comments

আপনার যদি প্রাক্তন হয়ে থাকে তবে এটি কীভাবে কাজ করবে। app.js, এবং jquery- মডিউল.জেএস, যে উভয়ই jquery প্রয়োজন ?, আমার জন্য আমি jquery13981378127, এবং jquery12389723198 উইন্ডোতে উদাহরণ হিসাবে পেয়েছি?

— মার্টিয়া

Answer 7

আমি সরবরাহিত উত্তরগুলির কয়েকটি চেষ্টা করেছি তবে সেগুলির কোনওটিই কাজ করে বলে মনে হয়নি। তারপরে আমি এটি চেষ্টা করেছি:

new webpack.ProvidePlugin({
    'window.jQuery'    : 'jquery',
    'window.$'         : 'jquery',
    'jQuery'           : 'jquery',
    '$'                : 'jquery'
});

আমি যে সংস্করণটি ব্যবহার করছি তা বিবেচনা করেই কাজ করার জন্য মনে হচ্ছে

Comments

+1 এটি একটি ভুল বোঝাবুঝি বলে মনে হচ্ছে যে এখানে যুক্ত করা গ্লোবালগুলি স্বয়ংক্রিয়ভাবে উইন্ডোটির বিপরীতে সেট হয়ে যাবে, এমনভাবে কাজ করবে বলে মনে হয় না যা আপনার স্পষ্ট হওয়া দরকার।

— জেমস 21

সঠিক, এটি উইন্ডো অবজেক্টে যুক্ত করে না। এটি ওয়েবপ্যাকের ভিতরে একটি উইন্ডো ওরফে তৈরি করে। সুতরাং আপনি যদি $কোনও ওয়েবপ্যাক প্রয়োজনীয় ফাইলের বাইরে ব্যবহার করার চেষ্টা করেন তবে এটি অপরিজ্ঞাত হবে।

— ক্যাম তুলোস

Answer 8

এটি ওয়েবপ্যাক 3 এ কাজ করে :

ওয়েবপ্যাক.কমফিগ.বাবেল.জেএস ফাইলটিতে:

resolve: {
    alias: {
         jquery: "jquery/src/jquery"
    },
 ....
}

এবং প্রোভাইডপ্লাগিন ব্যবহার করুন

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

Comments

(! আমার মত) অন্যদের যে webpack এ সুপার নতুন জন্য "সমাধান" আপনার webpack.config.js মধ্যে module.exports অধীনে যায় = {} শুধু এন্ট্রি, আউটপুট, প্লাগিন, মডিউল, ইত্যাদি .. মত

— DavGarcia

এবং নতুন ওয়েবপ্যাক.প্রভাইড প্লাগইন প্লাগইন অ্যারের ভিতরে চলে যায়।

— ডেভগার্সিয়া

Answer 9

আমি যে সবচেয়ে ভাল সমাধানটি পেয়েছি তা হ'ল:

https://github.com/angular/angular-cli/issues/5139#issuecomment-283634059

মূলত, আপনাকে টাইপিংস.ডি.এস.এস. এ একটি ডামি ভেরিয়েবল অন্তর্ভুক্ত করতে হবে, আপনার কোড থেকে 'জ্যাকুয়ারি' থেকে "হিসাবে যে কোনও" আমদানি * সরিয়ে ফেলতে হবে, এবং তারপরে ম্যানুয়ালি আপনার এসপিএ এইচটিএমএলতে jQuery স্ক্রিপ্টে একটি ট্যাগ যুক্ত করুন। এইভাবে, ওয়েবপ্যাক আপনার পথে হবে না এবং আপনার সমস্ত স্ক্রিপ্টগুলিতে একই বৈশ্বিক jQuery পরিবর্তনশীল অ্যাক্সেস করতে সক্ষম হওয়া উচিত।

Answer 10

এটি আমার জন্য ওয়েবপ্যাক.কনফিগ.জেজে কাজ করে

    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),

অন্য জাভাস্ক্রিপ্ট বা HTML এ যুক্ত করুন:

global.jQuery = require('jquery');

Answer 11

সম্পাদনা: কখনও কখনও আপনি ওয়েবপ্যাকটি কেবল একটি সাধারণ ওয়েব প্রকল্পের জন্য মডিউল বান্ডলার হিসাবে ব্যবহার করতে চান - নিজের কোডটি সুসংহত রাখতে। নিম্নলিখিত সমাধানটি তাদের জন্য যারা কেবলমাত্র একটি বাহ্যিক গ্রন্থাগারটি তাদের মডিউলগুলির মধ্যে প্রত্যাশা অনুযায়ী কাজ করতে চান - ওয়েবপ্যাক সেটআপগুলিতে প্রচুর সময় ডাইভিং না ব্যবহার করে। (-১ এর পরে সম্পাদিত)

আপনি যদি এখনও লড়াই করে থাকেন বা এক্সটার্নাল কনফিগারেশন / অতিরিক্ত ওয়েবপ্যাক প্লাগইন কনফিগারেশন এড়াতে চান তবে দ্রুত এবং সাধারণ (এস 6) সমাধান:

<script src="cdn/jquery.js"></script>
<script src="cdn/underscore.js"></script>
<script src="etc.js"></script>
<script src="bundle.js"></script>

একটি মডিউল ভিতরে:

const { jQuery: $, Underscore: _, etc } = window;