[javascript] वेबपैक में jQuery प्लगइन निर्भरता का प्रबंधन


4 Answers

Jquery के लिए वैश्विक पहुंच के लिए कई विकल्प मौजूद हैं। मेरी हालिया वेबपैक परियोजना में, मैं jquery तक वैश्विक पहुंच चाहता था इसलिए मैंने अपने प्लगइन घोषणाओं में निम्नलिखित जोड़ा:

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

इसका मतलब यह है कि वैश्विक संदर्भ $ और jQuery के माध्यम से जावास्क्रिप्ट स्रोत कोड के भीतर jquery पहुंच योग्य है।

बेशक, आपको एनपीएम के माध्यम से jquery भी स्थापित करने की आवश्यकता है:

$ npm i jquery --save

इस दृष्टिकोण के एक कामकाजी उदाहरण के लिए कृपया github पर मेरे ऐप को फोर्क करने के लिए स्वतंत्र महसूस करें

Question

मैं अपने आवेदन में वेबपैक का उपयोग कर रहा हूं, जिसमें मैं दो एंट्री पॉइंट्स बना रहा हूं - bundle.js मेरी सभी जावास्क्रिप्ट फाइलों / कोडों, और vendors.js के लिए jQuery और प्रतिक्रिया जैसे सभी पुस्तकालयों के लिए। प्लगइन का उपयोग करने के लिए मैं क्या करूँगा जिसमें jQuery निर्भरता के रूप में है और मैं उन्हें vendors.js में भी रखना चाहता हूं? क्या होगा यदि उन प्लगइन्स में एकाधिक निर्भरताएं हों?

वर्तमान में मैं यहां इस jQuery प्लगइन का उपयोग करने की कोशिश कर रहा हूं - https://github.com/mbklein/jquery-elastic । वेबपैक प्रलेखन प्लगइन प्लग और आयात-लोडर प्रदान करता है। मैंने प्रदान प्लगइन का उपयोग किया, लेकिन अभी भी jQuery ऑब्जेक्ट उपलब्ध नहीं है। यहां बताया गया है कि कैसे मेरा webpack.config.js दिखता है-

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",
            "windows.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;

लेकिन इसके बावजूद, यह अभी भी ब्राउज़र कंसोल में एक त्रुटि फेंकता है:

Uncaught ReferenceError: 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 को मेरे जावास्क्रिप्ट कोड के साथ bundle.js में बंडल किया गया है, और मैं चाहता हूं कि मेरे सभी jQuery प्लगइन्स vendors.js बंडल में हों। तो मैं इसे प्राप्त करने के बारे में कैसे जा सकता हूं?




संपादित करें: कभी-कभी आप एक सरल वेब प्रोजेक्ट के लिए मॉड्यूल बंडलर के रूप में वेबपैक का उपयोग करना चाहते हैं - अपना कोड व्यवस्थित रखने के लिए। निम्नलिखित समाधान उन लोगों के लिए है जो सिर्फ बाहरी पुस्तकालय को अपने मॉड्यूल के अंदर अपेक्षित काम करना चाहते हैं - वेबपैक सेटअप में बहुत समय डाइविंग का उपयोग किए बिना। (-1 के बाद संपादित)

त्वरित और सरल (es6) समाधान यदि आप अभी भी संघर्ष कर रहे हैं या बाहरी कॉन्फ़िगरेशन / अतिरिक्त वेबपैक प्लगइन कॉन्फ़िगरेशन से बचना चाहते हैं:

<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;



यह वेबपैक 3 में काम करता है :

webpack.config.babel.js फ़ाइल में:

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

और ProvidePlugin का उपयोग करें

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



मुझे मिला सबसे अच्छा समाधान था:

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

असल में, आपको typings.d.ts पर एक डमी वैरिएबल शामिल करने की आवश्यकता है, अपने कोड से किसी भी "आयात * को $ jquery" से हटाएं, और उसके बाद अपने एसपीए एचटीएमएल में jQuery स्क्रिप्ट में मैन्युअल रूप से एक टैग जोड़ें। इस तरह, वेबपैक आपके रास्ते में नहीं होगा, और आप अपनी सभी स्क्रिप्ट में एक ही वैश्विक jQuery चर का उपयोग करने में सक्षम होना चाहिए।




इसे webpack.config.js में अपने प्लगइन सरणी में जोड़ें

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

फिर सामान्य रूप से jquery की आवश्यकता होती है

require('jquery');

यदि दर्द इसे देखने के लिए अन्य स्क्रिप्ट प्राप्त करता रहता है, तो इसे स्पष्ट रूप से वैश्विक संदर्भ में डालें (प्रवेश जेएस में)

window.$ = jQuery;



Related