RequJS का उपयोग करके शिम के माध्यम से हाइचार्ट्स लोड करना और jQuery निर्भरता को बनाए रखना

Question

मैं RequJS में एक शिम का उपयोग करके हाईचार्ट्स लाइब्रेरी को लोड करने का प्रयास कर रहा हूं। हालांकि, जब हाईचार्ट लोड होता है, तो यह अपवाद फेंकता है क्योंकि यह उस jQuery विधियों तक नहीं पहुंच सकता है जिस पर यह निर्भर करता है।

config की आवश्यकता होती है लग रहा है तो जैसे:

require.config({ 
    baseUrl: "js", 

    shim: { 

     'libs/highcharts/highcharts.src.js': { 
      deps: ['jquery'], 
      exports: function(jQuery) 
      { 
       this.HighchartsAdapter = jQuery; 

       return this.Highcharts; 
      } 
     } 
    } 
}); 

अपवाद है कि फेंक दिया जाता है है:

Uncaught TypeError: undefined is not a function 

और इस लाइन के संबंध में है:

dataLabels: merge(defaultLabelOptions, { 

मुद्दा है merge कॉल, जो अंततः स्वयं को jQuery पर वापस नक्शा (या कुछ अन्य एडाप्टर जो हाइच कला का समर्थन करता है; लेकिन मैं बस jQuery का उपयोग कर रहा हूँ)।

मुझे यकीन नहीं है कि हाइचार्ट्स को RequJS और shim का उपयोग करके jQuery तक पहुंच प्राप्त हो रही है।

क्या किसी ने पहले आवश्यकताजेएस और हाईचार्ट्स का उपयोग किया है? मुझे लगता है कि यह मुद्दा हाईचार्ट्स के लिए विशिष्ट नहीं है, लेकिन किसी भी पुस्तकालय जिसमें अन्य प्रकार की निर्भरताएं हैं।

किसी भी सलाह या सही दिशा के लिए अंक के लिए अग्रिम धन्यवाद!

आगे संदर्भ जोड़ने के लिए उम्मीद है कि कोई है जो require.js या शिम्स से परिचित है भी परिचित Highcharts से परिचित होने की बिना मदद करने के लिए सक्षम हो जाएगा में,, यहाँ कुछ स्रोत है कि Highcharts में इस merge विधि सेट है

var globalAdapter = win.HighchartsAdapter, 
adapter = globalAdapter || {}, 

// Utility functions. If the HighchartsAdapter is not defined, 
// adapter is an empty object 
// and all the utility functions will be null. In that case they are 
// populated by the 
// default adapters below. 

// {snipped code} 

merge = adapter.merge 

// {snipped code} 

if (!globalAdapter && win.jQuery) { 
    var jQ = win.jQuery; 

    // {snipped code} 

    merge = function() { 
     var args = arguments; 
     return jQ.extend(true, null, args[0], args[1], args[2], args[3]); 
    }; 

    // {snipped code} 
} 

win वस्तु एक संदर्भ स्क्रिप्ट की शुरुआत में window करने के लिए स्थापित है। इसलिए, मैंने सोचा कि शिम पर निर्यात विधि में window.jQuery = jQuery; जोड़ना परिणामस्वरूप उच्च संदर्भों को jQuery संदर्भ उठा रहा है; लेकिन ऐसा नहीं हुआ।

फिर, इस बिंदु पर किसी भी अंतर्दृष्टि, जानकारी, सलाह, या हेकल्स की सराहना की जाएगी - मैं पूरी तरह से नुकसान पहुंचा रहा हूं, और यह पूछना शुरू कर रहा हूं कि ब्राउज़र जावास्क्रिप्ट में कार्यान्वित करने और एएमडी पैकेज सिस्टम की कोशिश करने के लिए यह भी मूल्यवान है।

---

pabera से जवाब को स्वीकार नीचे मैं इसे अपने प्रश्न को प्रतिबिंबित करने के लिए कैसे अपने जवाब मेरे समाधान में मदद की अद्यतन करने के लिए उचित सोचा के बाद (हालांकि, यह मूल रूप से उसके जवाब है)।

RequJS "एएमडी" समर्थित libs खोजने के लिए "पथ" का उपयोग करता है और उन्हें आपके पृष्ठ पर लोड करता है। "शिम" ऑब्जेक्ट आपको पथों में परिभाषित पुस्तकालयों के लिए निर्भरताओं को परिभाषित करने की अनुमति देता है। आवश्यकताएं स्क्रिप्ट लोड करने का प्रयास करने से पहले निर्भरताओं को लोड किया जाना चाहिए।

निर्यात संपत्ति यह निर्धारित करने के लिए एक तंत्र प्रदान करती है कि पुस्तकालय लोड होने पर निर्धारित करने के लिए कैसे किया जाए। Jquery, रीढ़ की हड्डी, सॉकेटियो, आदि जैसे मूल libs के लिए वे सभी कुछ विंडो स्तर चर (Backbone, io, jQuery और $, आदि) निर्यात करते हैं। आप बस उस चर नाम को exports संपत्ति के रूप में प्रदान करते हैं, और requjs यह निर्धारित करने में सक्षम होंगे कि lib कब लोड होता है।

आपकी परिभाषाएं पूरी होने के बाद, आप requirejs 'define फ़ंक्शन का उपयोग कर सकते हैं।

यहाँ मेरी उदाहरण require.config वस्तु है: पहले उल्लेख किया

require.config({ 
    baseUrl: "/js/", 

    paths: { 
     jquery: 'jquery', 
     socketio: 'http://localhost:8000/socket.io/socket.io', //for loading the socket.io client library 
     highcharts: 'libs/highcharts/highcharts.src', 
     underscore: 'libs/underscore', 
     backbone: 'libs/backbone' 
    }, 

    shim: { 
     jquery: { 
      exports: 'jQuery' 
     }, 

     socketio: { 
      exports: 'io' 
     }, 

     underscore: { 
      exports: '_' 
     }, 

     backbone: { 
      deps: ['jquery', 'underscore'], 
      exports: 'Backbone' 
     }, 

     highcharts: { 
      deps: ['jquery'], 
      exports: 'Highcharts' 
     } 
    } 
}); 

pabera रूप, इस Require.JS संस्करण 2.0.1 के लिए है।

मुझे आशा है कि किसी को इस से बाहर कुछ का उपयोग हो जाता है; मुझे पता है कि सड़क ने मुझे थोड़ी देर के लिए अवरुद्ध कर दिया; इसलिए उम्मीद है कि हमने आपको दीवार पर उसी स्थान पर अपने सिर को टक्कर देने से रोक दिया है, जिसे हमने पोस्ट करके किया था।

Answer 1

मैं ठीक उसी समस्या थी और मैं कई के आसपास घंटे संघर्ष कर रहा था जब तक मैं अपनी प्रविष्टि देखा यहाँ। तब मैंने खरोंच से शुरू किया और अब यह कम से कम मेरे लिए काम करता है।

requirejs.config({ 
    baseUrl:'/js/', 
    paths:{ 
     jquery:'vendor/jquery', 
     handlebars: 'vendor/handlebars', 
     text: 'vendor/require-text', 
     chaplin:'vendor/chaplin', 
     underscore:'vendor/underscore', 
     backbone:'vendor/backbone', 
     highcharts: 'vendor/highcharts' 
    }, 

    shim: { 
     backbone: { 
     deps: ['underscore', 'jquery'], 
     exports: 'Backbone' 
     }, 
     underscore: { 
     exports: '_' 
     },  
     highcharts: { 
     exports: 'Highcharts' 
     }  
    }, 
}); 

जब से मैं रीढ़ की चोटी पर Chaplin उपयोग करते हैं, मैं में मेरी रास्तों का श्रेय कुछ और फ़ाइलों सहित कर रहा हूँ। हाईचार्ट्स में बैकबोन की एक समान संरचना है इसलिए मैंने सोचा कि मैं इसे उसी तरह लोड कर सकता हूं। यह अब मेरे लिए काम करता है। जैसा कि आप देख सकते हैं, मैं पहले से ही एक शिम afterwords के रूप में निर्यात करने के लिए पथ विशेषता में हाईचार्ट पेश कर रहा हूँ।

हो सकता है कि इस मदद करता है, अन्यथा की अपनी समस्या को हल करने के लिए उस पर और भी अधिक योगदान करने के लिए कोशिश करते हैं।

Answer 2

हालांकि jQuery को एएमडी मॉड्यूल के रूप में उपयोग किया जा सकता है, फिर भी यह खुद को विंडो में निर्यात करेगा फिर भी वैश्विक jQuery या $ के आधार पर कोई भी स्क्रिप्ट तब तक काम करेगी जब तक कि jQuery ने पहले लोड नहीं किया है।

आप एक मार्ग स्थापित करने की कोशिश की है? jQuery एक दिलचस्प है क्योंकि यद्यपि आप एनईओआरयूजेड हैं जो आपके मॉड्यूल को RequJS दस्तावेज़ द्वारा नामित नहीं करते हैं, jQuery वास्तव में करता है।

jQuery स्रोत

if (typeof define === "function" && define.amd && define.amd.jQuery) { 
    define("jquery", [], function() { return jQuery; }); 
} 

क्या मतलब है कि आप जहां 'jQuery' को खोजने के लिए RequireJS बताने के लिए की आवश्यकता होगी से। तो:

require.config({ 
    paths: { 
     'jquery': 'path/to/jquery' 
    } 
}); 

तुम क्यों jQuery ही तो इस तरह से there is a pretty large comment in the source जो और अधिक विस्तार में चला जाता है पंजीकृत करता है में रुचि रखते हैं