RequJS मॉड्यूल/पैकेज के साथ सापेक्ष पथ

Question

मैं RequJS के लिए काफी नया हूं और मैंने कुछ समस्याएं निभाई हैं। मैंने RequJS का उपयोग करके बैकबोन पर बनाया गया एक छोटा ढांचा लिखा है और मैं इसे विभिन्न परियोजनाओं में पुनः उपयोग करने योग्य बनाना चाहता हूं। तो, कुछ खोजों के साथ मैंने सीखा कि पैकेजों की आवश्यकता है। ऐसा लगता है कि मैं क्या देख रहा था।

require.config({ 
    packages: ['framework'] 
}); 

require(['framework'], function(framework) { 
    framework.createDash(); 
}); 

तब मेरे main.js रूप में एक ही निर्देशिका में मैं एक निर्देशिका "ढांचा" कहा जाता है जो एक और main.js जो लग रहा है शामिल है: मुझे लगता है कि अनिवार्य रूप से इस तरह दिखता है मेरी एप्लिकेशन लॉन्च करने के लिए एक main.js फ़ाइल है इस तरह:

define(function(require, exports, module) { 
    exports.createDash = function(dash, element) { 
    require(['dash/dash.model', 'dash/dash.view'], function(DashModel, DashView) { 
     return new DashView({ 
     model: new DashModel(dash), 
     el: element ? element : window 
     }); 
    }); 
    }; 
}); 

मैं this page पाया जो इंगित करता है कि 'require' तर्क submodule के दायरे वाला होना चाहिए खोज में। हालांकि, जब मैं चीजों की आवश्यकता करने की कोशिश करता हूं तो वे अभी भी मेरे मूल main.js. के सापेक्ष हैं। मैंने कई चीजों की कोशिश की है और बिना किसी लाभ के घंटों की खोज की है। क्या मेरे पास किसी भी तरह से मेरे पैकेज में my.js के सापेक्ष मेरे पैकेज के भीतर कॉल की आवश्यकता/परिभाषित कॉल हो सकती है?

Answer 1

आप की आवश्यकता होती है विन्यास में पैकेज के रूप में अपने submodule परिभाषित करने की जरूरत में

define(['jquery', 'packagename'], function($, MyPackage) { 
    MyPackage.useIt() 
}); 

अपने पैकेज आपको ./ उपसर्ग का उपयोग अपने सबमिशन से संबंधित अपनी फ़ाइलों को लोड करने के लिए करना होगा:

define(['globalDependency', './myLocalFile'], function(Asdf, LocalFile) { 
    LocalFile.finallyLoaded(); 
}); 

---

वहाँ एक उपयोगी शॉर्टकट है: अपने पैकेज का नाम अपने स्थान के बराबर होती है और अपने मुख्य फ़ाइल 'main.js' कहा जाता है, तो आप इस

packages: [ 
    { name: 'packagename', 
     location: 'packagename', 
     main: 'main' 
    }] 

इस के लिए

की जगह ले सकता:

packages: ['packagename'] 

जहाँ तक मैं देख सकता हूं, आपने पहले से ही एक पैकेज को परिभाषित करने का प्रयास किया है, लेकिन क्या आपने ./ उपसर्ग का भी उपयोग किया है? इस उपसर्ग आवश्यकता के बिना फ़ाइलों को इसके वैश्विक रूट-पथ में खोजने का प्रयास करेगा। और पैकेज के बिना, ./ बेकार होगा क्योंकि सापेक्ष पथ वैश्विक रूट-पथ जैसा ही है।

चीयर्स

Answer 2

यह मेरे लिए काम किया, मॉड्यूल के नाम करने के लिए एक "./" उपसर्ग जोड़ने:

define(function (require, exports, module) { 
    exports.createDash = function (dash, element) { 
     require([ './dash/dash.model', './dash/dash.view' ], function (DashModel, DashView) { 
      return new DashView({ 
       model : new DashModel(dash), 
       el : element ? element : window 
      }); 
     }); 
    }; 
}); 

Answer 3

मैं अपने सवाल का जवाब पता लगा, और समाधान (वे जाहिरा तौर पर ही नहीं थे)। मुझे लगता है कि अगर मैं भविष्य में किसी और की मदद कर सकता हूं तो मैं इसे यहां पोस्ट करूंगा।

अनिवार्य रूप से जो मैं चाहता था वह अपने ढांचे को अपने संदर्भ में लोड करना था। मुझे आवश्यकता की वेबसाइट पर configuration section के तहत संदर्भ विकल्प और example of how to use it पर संदर्भ विकल्प मिला। मूल रूप से मैंने ऐसा कुछ करने की कोशिश की:

var req = require.config({ 
    baseUrl: 'framework', 
    context: 'framework', 

    paths: { 
     jQuery: 'lib/jquery/jquery-1.7.min.js', 
     Underscore: 'lib/underscore/underscore.min.js', 
     Backbone: 'lib/backbone/backbone.min.js', 
     etc... 
    } 
}); 

req(['main'], function() {}); 

इसके साथ दो समस्याएं थीं। सबसे पहले, मेरे 'req' चर को ढांचे के बाहर परिभाषित किया जा रहा था, लेकिन मैं ढांचे को अपने स्वयं के पथ परिभाषित करना चाहता था। और दूसरा, जब भी ढांचे के बाहर एक फ़ाइल को ढांचे के भीतर एक फ़ाइल की आवश्यकता होती है, जिसके बदले में 'jQuery' की आवश्यकता होती है, उदाहरण के लिए, तो फ्रेमवर्क उदाहरण के संदर्भ में jQuery (या जो कुछ भी) की आवश्यकता नहीं होगी आवश्यकता है और इसलिए यह फ़ाइल नहीं मिल सका।

मुझे अपने ढांचे के main.js को परिभाषित किया गया था कुछ इस तरह देखने के लिए कर समाप्त हो गया:

var paths = { 
    jQuery: 'lib/jquery/jquery-1.7.min.js', 
    Underscore: 'lib/underscore/underscore.min.js', 
    Backbone: 'lib/backbone/backbone.min.js', 
    etc... 
}; 

define(function() { 
    var exports = {}; 

    exports.initialize = function(baseUrl, overridePaths, callback) { 
     if(!overridePaths) { 
     overridePaths = {}; 
     } 
     if(baseUrl && baseUrl[baseUrl.length - 1] != '/') { 
      baseUrl = baseUrl + '/'; 
     } 

     var fullpaths = {}; 
     for(var path in paths) { 
      // Don't add baseUrl to anything that looks like a full URL like 'http://...' or anything that begins with a forward slash 
      if(paths[path].match(/^(?:.*:\/\/|\/)/)) { 
       fullpaths[path] = paths[path]; 
      } 
      else { 
       fullpaths[path] = baseUrl + paths[path]; 
      } 
     } 

     var config = {paths: fullpaths}; 
     for(var pathName in overridePaths) { 
      config.paths[pathName] = overridePaths[pathName]; 
     } 
     require.config(config); 

     // Do anything else you need to do such as defining more functions for exports 

     if(callback) { 
      callback(); 
     } 
    } 

    return exports; 
}); 

और फिर अपने प्रोजेक्ट के main.js में मैं सिर्फ यह कर फ़ाइल:

require(['framework/main'], function(framework) { 
    // NOTE: This setTimeout() call is used because, for whatever reason, if you make 
    //  a 'require' call in here or in the framework without it, it will just hang 
    //  and never actually go fetch the files in the browser. There's probably a 
    //  better way to handle this, but I don't know what it is. 
    setTimeout(function() { 
     framework.initialize('framework', null, function() { 
      // Do stuff here 
     } 
    }, 0); 
}); 

यह 'बेसURL' के लिए फ्रेमवर्क की आरंभिक() विधि में जो कुछ भी पारित हो जाता है और उस फ्रेम को परिभाषित करता है जो फ्रेमवर्क परिभाषित करता है जो आगे की स्लैश या 'कुछ भी: //' से शुरू नहीं होता है, जब तक वे पथ ओवरराइड नहीं करते हैं। यह 'jQuery' जैसी चीज़ों को ओवरराइड करने के लिए ढांचे का उपयोग करके पैकेज को अनुमति देता है।

require.config({ 
    packages: [ 
    { name: 'packagename', 
     location: 'path/to/your/package/root', // default 'packagename' 
     main: 'scriptfileToLoad'    // default 'main' 
    }] 
    ... some other stuff ... 
}); 

अपने मॉड्यूल तुम सिर्फ आवश्यकताओं पर अपने 'PackageName' का उपयोग करने की आवश्यकता है लोड करने के लिए:

Answer 4

एक प्रक्रिया है कि submodules के साथ एक पैकेज की इजाजत दी डेटा-मुख्य से या किसी बाहरी ढांचे से सीधे इस्तेमाल किया जा करने के लिए मेरे लिए अच्छी तरह से काम किया, यह सोचते हैं कि एक main.js (या अन्य पैकेज मुख्य) किसी विशेष नाम से बुलाया जाता है, var baseUrl = require.toUrl('packageName') + '/../' को require.config({ paths: { ... } }) कॉन्फ़िगरेशन फ़ाइल के उपसर्ग के रूप में उपयोग करना था। उदाहरण के लिए:

var music21Base = require.toUrl('music21') + '/../'; 

require.config({ paths: { 
          'jquery': music21Base + 'ext/jquery/jquery.2.1.10.min'; 
          'subModuleLoader': music21Base + 'src/subModuleLoader'; 
         } }); 

context: "xxx" की स्थापना ./modName के साथ सामान्य मॉड्यूल फोन करने के लिए ठीक काम किया है लेकिन मेरे लिए paths तर्क के लिए काम नहीं किया।