मौजूदा आवश्यकता वाले अनुप्रयोग के साथ वेबपैक का उपयोग

Question

मैं मौजूदा एप्लिकेशन (canvas-lms) के साथ काम कर रहा हूं जो इसकी बिल्ड सिस्टम में RequJS का उपयोग करता है। मैं एक छद्म-स्टैंडअलोन एप्लिकेशन पर काम कर रहा हूं जो कैनवास में प्लग करता है (कैनवास पैरालांस में "क्लाइंट_एप")। यह एक फ़ॉन्टेंड-केवल ऐप है जो एपीआई को मेजबान कैनवास ऐप पर वापस कॉल करता है। विवरण मेरे प्रश्न के लिए बहुत महत्वपूर्ण नहीं हैं - सभी क्लाइंट_एप को करने की ज़रूरत है एक बिल्ड स्क्रिप्ट है जो एक जेएस फ़ाइल को कैनवास ऐप पेड़ के भीतर परिभाषित जगह में थूकती है।

मैं RequjS के बजाय अपना ऐप बनाने के लिए वेबपैक का उपयोग करने की कोशिश कर रहा हूं। सबकुछ बढ़िया काम करता है अगर मैं अपनी सभी निर्भरताओं को आत्मनिर्भर रखता हूं (उदा। एनपीएम-सब कुछ जो मुझे चाहिए) स्थापित करें; हालांकि, कैनवास पहले से ही इनमें से कई निर्भरताओं (जैसे प्रतिक्रिया, jQuery) प्रदान करता है, और jQuery के मामले में, यह एक पैच किए गए संस्करण प्रदान करता है जिसे मैं इसके बजाय उपयोग करना चाहता हूं। यह वह जगह है जहां मुझे समस्याएं शुरू होती हैं।

काम पर प्रतिक्रिया प्राप्त करना आसान था; कैनवास बोवर के साथ स्थापित करता है, तो मैं में एक alias जोड़ने के लिए कर रहा था मेरी webpack config to point at it:

alias: { 
    'react': __dirname + '/vendor/canvas/public/javascripts/bower/react/react-with-addons', 
} 

मैं कहां से आ रही हैं (__dirname + /vendor/canvas मेजबान कैनवास आवेदन के पेड़ को अपने आवेदन के पेड़ में एक सिमलिंक है) समस्या jQuery की प्रदान की गई प्रति लोड करने की कोशिश कर रही है।

/public/javascripts/jquery.js:

define(['jquery.instructure_jquery_patches'], function($) { 
    return $; 
}); 

/public/javascripts/jquery.instructure_jquery_patches.js:

कैनवास निम्नलिखित jQuery संरचना है

define(['vendor/jquery-1.7.2', 'vendor/jquery.cookie'], function($) { 
    // does a few things to patch jquery ... 
    // ... 
    return $; 
}); 

/public/javascripts/vendor/jquery.cookie.js - मानक jquery.cookie प्लगइन की तरह दिखता है, एक एएमडी में लिपटे परिभाषित :

define(['vendor/jquery-1.7.2'], function(jQuery) { 

jQuery.cookie = function(name, value, options) { 
    //...... 
}; 

}); 

और अंत में, /public/javascripts/vendor/jquery-1.7.2.js। इसे पेस्ट करने के लिए नहीं जा रहा है, क्योंकि यह बोग-मानक jQuery1.7.2 है, सिवाय इसके कि AMD define has been made anonymous - इसे स्टॉक व्यवहार में वापस करने से कोई फर्क नहीं पड़ता है।

मैं var $ = require('jquery') या import $ from 'jquery' जैसे कुछ करने में सक्षम होना चाहता हूं और वेबपैक को जो भी जादू, खराब दस्तावेज वाले वूडू को jquery.instructure-jquery-patches का उपयोग करने की आवश्यकता है।

मैं अपने webpack.config.js फ़ाइल में resolve.root के लिए पथ को जोड़ने की कोशिश की है:

resolve: { 
    extensions: ['', '.js', '.jsx'], 
    root: [ 
    __dirname + '/src/js', 
    __dirname + '/vendor/canvas/public/javascripts' 
    ], 
    alias: { 
    'react': 'react/addons', 
    'react/addons/lib': 'react/../lib' 
    } 
}, 

यह है कि जब मैं एक require('jquery') करते हैं, यह पहली बार /public/javascripts/jquery.js है, जो एक निर्भरता के रूप में instructure_jquery_patches साथ एक मॉड्यूल को परिभाषित करता है पाता है मतलब यह होना चाहिए। यह instructure_jquery_patches में आता है, जो दो निर्भरताओं ('vendor/jquery-1.7.2', 'vendor/jquery.cookie') के साथ एक मॉड्यूल को परिभाषित करता है।

अपने मुख्य प्रवेश बिंदु (index.js) में, मैं jQuery का आयात कर रहा हूँ (यह भी कोशिश की एक commonjs की आवश्यकता होती है, कोई फर्क नहीं), और इसका इस्तेमाल करने की कोशिश कर रहा:

import React from 'react';  


import $ from 'jquery'; 
$('h1').addClass('foo');  

if (__DEV__) { 
    require('../scss/main.scss'); 
    window.React = window.React || React; 
    console.log('React: ', React.version); 
    console.log('jQuery:', $.fn.jquery); 
} 

webpack साथ बंडल निर्माण काम करने के लिए लगता है; कोई त्रुटि नहीं है।जब मैं ब्राउज़र में पेज लोड करने के लिए, हालांकि, मैं jquery.instructure-jquery-patches.js के भीतर से एक त्रुटि हो रही है कोशिश:

यह प्रतीत होता है कि jQuery jquery.instructure-jquery-patches.

यह है के भीतर उपलब्ध नहीं है हालांकि, पेज लोड के बाद वैश्विक दायरे में उपलब्ध है, इसलिए jQuery का मूल्यांकन और निष्पादन किया जा रहा है।

मेरा अनुमान है कि मैं requirejs/AMD asynchronicity समस्या के कुछ प्रकार में चल रहा हूँ, लेकिन यह अंधेरे में एक शॉट है। मुझे निश्चित रूप से जानने के लिए requjs या amd के बारे में पर्याप्त जानकारी नहीं है।

Answer 1

टोबीसके के comment ने मुझे मेरी वेबपैक कॉन्फ़िगरेशन में amd: { jQuery: true } जोड़ने की आवश्यकता पर ध्यान दिया। सब कुछ अब काम कर रहा है।