आवश्यकताएँ का उपयोग कर बैकबोन और अंडरस्कोर लोड हो रहा है

Question

मैं आवश्यकता के साथ बैकबोन और अंडरस्कोर (साथ ही jQuery) लोड करने की कोशिश कर रहा हूं। बैकबोन और अंडरस्कोर के नवीनतम संस्करणों के साथ, यह एक तरह से मुश्किल लगता है। एक के लिए, अंडरस्कोर स्वचालित रूप से खुद को एक मॉड्यूल के रूप में पंजीकृत करता है, लेकिन बैकबोन मानता है कि अंडरस्कोर विश्व स्तर पर उपलब्ध है। मुझे यह भी ध्यान देना चाहिए कि बैकबोन खुद को एक मॉड्यूल के रूप में पंजीकृत नहीं करता है, जो इसे अन्य कार्यों के साथ असंगत बनाता है। यह सबसे अच्छा main.js है जो मुझे उस काम के साथ मिल सकता है:

require(
{
    paths: {
        'backbone': 'libs/backbone/backbone-require',
        'templates': '../templates'
    }
},
[
    // jQuery registers itself as a module.
    'http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js',

    // Underscore registers itself as a module.
    'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js'
], function() {

    // These nested require() calls are just due to how Backbone is built.  Underscore basically says if require()
    // is available then it will automatically register an "underscore" module, but it won't register underscore
    // as a global "_".  However, Backbone expects Underscore to be a global variable.  To make this work, we require
    // the Underscore module after it's been defined from within Underscore and set it as a global variable for
    // Backbone's sake.  Hopefully Backbone will soon be able to use the Underscore module directly instead of
    // assuming it's global.
    require(['underscore'], function(_) {
        window._ = _;
    });

    require([
        'order!http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js',
        'order!app'
    ], function(a, app) {
        app.initialize();
    })
});

मुझे इसका उल्लेख करना चाहिए, जबकि यह काम करता है, ऑप्टिमाइज़र इस पर विचार करता है। मैं निम्नलिखित प्राप्त करता हूं:

Tracing dependencies for: main
js: "/home/httpd/aahardy/requirejs/r.js", line 7619: exception from uncaught JavaScript throw: Error: Error: Error evaluating module "undefined" at location "/home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js":
JavaException: java.io.FileNotFoundException: /home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js (No such file or directory)
fileName:/home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js
lineNumber: undefined
http://requirejs.org/docs/errors.html#defineerror
In module tree:
    main

क्या इससे निपटने का एक बेहतर तरीका है? धन्यवाद!

Comments

क्या आपने इसे किसी भी ट्यूटोरियल का उपयोग किया है?

— काहा

मैंने विभिन्न ट्यूटोरियल जैसे backbonetutorials.com/organizing-backbone-use-modules को देखा, लेकिन वे अब अंडरस्कोर और बैकबोन के नवीनतम संस्करणों के साथ पुराने हो गए हैं।

— एरोनियस

मुझे अन्य पुस्तकालयों और इसके विपरीत के साथ उपयोग करने के लिए आवश्यकताएं भी कठिन लगीं। यही कारण है कि मैंने एक पुस्तकालय बनाया जिसका उपयोग करना बहुत आसान है और कोणीय के साथ परीक्षण किया जाता है। नीचे एक डेमो एप्लिकेशन है: gngeorgiev.github.io/Modulerr.js आप मॉडुलर.जेएस पर निर्भरता के बिना सभी लिपियों को एक साथ जोड़ सकते हैं

— जॉर्जी-यह

btw सिंक्रोनस एसिंक्रोनस मॉड्यूल परिभाषा थोड़े ऑक्सीमोरन है :)

— स्ट्रैज ऑक्ट

हा! अच्छी बात। संपादित।

— आरोनियस

Answer 1

आवश्यकता 2.SJS 2.X अब नए shimकॉन्फ़िगरेशन का उपयोग करके गैर-एएमडी मॉड्यूल जैसे बैकबोन और अंडरस्कोर को बेहतर तरीके से संबोधित करता है।

shimविन्यास का उपयोग करने के लिए सरल है: (1) एक में कहा गया निर्भरता ( deps), यदि कोई हो, (से हो जो कर सकते हैं pathsविन्यास, या मान्य पथ खुद को हो सकता है)। (2) (वैकल्पिक रूप से) आपके द्वारा चमकने वाली फ़ाइल से वैश्विक चर नाम निर्दिष्ट करें, जिसे आपके मॉड्यूल फ़ंक्शन को निर्यात करना चाहिए जिन्हें इसकी आवश्यकता है। (यदि आप निर्यात निर्दिष्ट नहीं करते हैं, तो आपको केवल वैश्विक उपयोग करने की आवश्यकता होगी, क्योंकि कुछ भी आपकी आवश्यकता / परिभाषित कार्यों में पारित नहीं होगा।)

यहाँ shimबैकबोन को लोड करने का एक सरल उदाहरण उपयोग है । यह अंडरस्कोर के लिए एक निर्यात भी जोड़ता है, भले ही इसकी कोई निर्भरता न हो।

require.config({
  shim: {
    underscore: {
      exports: '_'
    },
    backbone: {
      deps: ["underscore", "jquery"],
      exports: "Backbone"
    }
  }
});

//the "main" function to bootstrap your code
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone) {   // or, you could use these deps in a separate module using define

});

^{नोट: यह सरलीकृत कोड मानता है कि jquery, backbone और underscore "jquery.js", "backbone.js" और "underscore.js" नाम की फाइलों में एक ही डायरेक्टरी में हैं क्योंकि यह मुख्य "कोड (जो आवश्यकता के लिए आधार बनता है) )। यदि यह मामला नहीं है, तो आपको पथ विन्यास का उपयोग करने की आवश्यकता होगी ।}

मैं व्यक्तिगत रूप से अंतर्निहित shimकार्यक्षमता के साथ सोचता हूं , बैकबोन और अंडरस्कोर के कांटे हुए संस्करण का उपयोग न करने के फायदे अन्य लोकप्रिय उत्तर में अनुशंसित एएमडी कांटा का उपयोग करने के लाभों से आगे निकलते हैं, लेकिन दोनों तरह से काम करते हैं।

Comments

क्या इस कोड का उपयोग Sample RequireJS 2.0.1 + jQuery 1.7.2 project जरूरीjs.org/docs/download.html#samplejquery के साथ किया जाना चाहिए ?

— हेनरी

अगर मैं आपको सही ढंग से समझ गया, हेनरी, आप पूछ रहे हैं कि क्या $ प्लग के लिए शिम आवश्यक है। यह नहीं है, यदि आप उस नमूना परियोजना से संयुक्त आवश्यकता- jquery.js फ़ाइल का उपयोग करते हैं। ऐसा इसलिए है क्योंकि संयुक्त फ़ाइल के साथ, jquery आवश्यकता के साथ समकालिक रूप से लोड हो जाता है, इसलिए jquery को उस समय तक लोड करने की गारंटी दी जाती है जब आप किसी भी मॉड्यूल में $ प्लगइन्स का उपयोग करने का प्रयास करते हैं। इस मामले में, जब आप $ प्लगइन्स का उपयोग करना चाहते हैं, तो आप उन्हें अपनी निर्भरता सूची में शामिल कर सकते हैं जैसे कि वे एएमडी थे, भले ही वे न हों। यह निश्चित रूप से नियम का अपवाद है, और आम तौर पर आपको किसी भी गैर-एएमडी मॉड्यूल के लिए शिम की आवश्यकता होगी।

— बेन रॉबर्ट्स

ध्यान दें कि शिम कॉफ़िग्यूरेशन उस नमूना परियोजना के साथ संगत है और इसका उपयोग अन्य गैर-एएमडी पुस्तकालयों को जोड़ने के लिए किया जा सकता है।

— बेन रॉबर्ट्स

बस मैंने सोचा था कि यह वास्तव में जाने का तरीका होगा, काश मैं इसे # 1 उत्तर पाने के लिए +50 उत्थान दे सकता।

— कोबालस

इस उत्तर में विधि आशाजनक लग रही थी, लेकिन मेरे लिए काम नहीं किया। मैंने इसके बजाय gist.github.com/2517531 का उपयोग किया , जिसने ठीक काम किया।

— रोब डब्ल्यू

Answer 2

अपडेट : संस्करण के रूप में 1.3.0 अंडरस्कोर ने एएमडी (आवश्यकताएँ) का समर्थन हटा दिया ।

आप जेम्स बर्क (आवश्यकताएँ के अनुरक्षक) से एएमडी समर्थन के साथ amdjs / Backbone 0.9.1 और amdjs / Underscore 1.3.1 फोर्क का उपयोग कर सकते हैं ।

अंडरस्कोर और बैकबोन के लिए एएमडी समर्थन के बारे में अधिक जानकारी ।

// main.js using RequireJS 1.0.7
require.config({
    paths: {
        'jquery': 'libs/jquery/1.7.1/jquery',
        'underscore': 'libs/underscore/1.3.1-amdjs/underscore', // AMD support
        'backbone': 'libs/backbone/0.9.1-amdjs/backbone', // AMD support
        'templates': '../templates'
    }
});

require([
    'domReady', // optional, using RequireJS domReady plugin
    'app'
], function(domReady, app){
    domReady(function () {
        app.initialize();
    });
});

मॉड्यूल ठीक से पंजीकृत हैं और ऑर्डर प्लगइन की कोई आवश्यकता नहीं है:

// app.js
define([
    'jquery', 
    'underscore',
    'backbone'
], function($, _, Backbone){
    return {
        initialize: function(){
            // you can use $, _ or Backbone here
        }
    };
});

अंडरस्कोर वास्तव में वैकल्पिक है, क्योंकि बैकबोन को अब अपने आप ही निर्भरता मिलती है:

// app.js
define(['jquery', 'backbone'], function($, Backbone){
    return {
        initialize: function(){
            // you can use $ and Backbone here with
            // dependencies loaded i.e. Underscore
        }
    };
});

कुछ एएमडी चीनी के साथ आप इसे इस तरह भी लिख सकते हैं:

define(function(require) {
    var Backbone = require('backbone'),
        $ = require('jquery');

    return {
        initialize: function(){
            // you can use $ and Backbone here with
            // dependencies loaded i.e. Underscore
        }
    };
});

ऑप्टिमाइज़र त्रुटि के बारे में: अपने बिल्ड कॉन्फ़िगरेशन को डबलचेक करें। मुझे लगता है कि आपका पथ विन्यास बंद है। यदि आपके पास जरुरी डॉक्स के समान डायरेक्टरी सेटअप है तो आप इसका उपयोग कर सकते हैं:

// app.build.js
({
    appDir: "../",
    baseUrl: "js",
    dir: "../../ui-build",
    paths: {
        'jquery': 'libs/jquery/1.7.1/jquery',
        'underscore': 'libs/underscore/1.3.1-amdjs/underscore',
        'backbone': 'libs/backbone/0.9.1-amdjs/backbone',
        'templates': '../templates'
    }, 
    modules: [
        {
            name: "main"
        }
    ]
})

Comments

ठीक वैसा ही मैं देख रहा था। धन्यवाद! महान विस्तृत जवाब के रूप में अच्छी तरह से। यह अब बस चल रहा है जैसा आपने वर्णित किया है।

— आरोनियस

+1 सटीक, कार्यशील और अद्यतन उत्तर + उदाहरण। उत्कृष्ट काम रिबेल, आपने मेरी मदद की है, और मुझे यकीन है कि दूसरों को, बहुत कुछ।

— केन

मूल पोस्ट के लंबे समय बाद इसे अपडेट रखने के लिए सुपर-बोनस।

— एरोनियस २१'१२

शानदार जवाब @Riebel! यह वास्तव में मेरे लिए उपयोगी है। Btw, मैं भी वोलो पर एक नज़र रखने की सलाह दूंगा । यह एक पुस्तकालय है जिसे जेर्बुर्के (अपेक्षितों के निर्माता) द्वारा निर्मित किया गया है, जो गीथब से निर्भरता प्राप्त करने के लिए है। उदाहरण के लिए अंडरस्कोर के एएमडी संस्करण को पुनः प्राप्त करना केवल टाइपिंग किया जाता है: वोलो ऐड अंडरस्कोर

— txominpelu

Answer 3

संदर्भ के लिए, संस्करण 1.1.1 (~ फ़रवरी '13) के रूप में, बैकबोन भी खुद को एएमडी मॉड्यूल के रूप में पंजीकृत करता है । यह अपने शिम विन्यास का उपयोग करने की आवश्यकता के बिना आवश्यकता के साथ काम करेगा। ( जेम्स बर्क के amdjs कांटा भी 1.1.0 के बाद से अद्यतन नहीं किया गया है)

Answer 4

अच्छी खबर है, अंडरस्कोर 1.6.0 अब आवश्यकताओं को परिभाषित करने का समर्थन करता है !!!

इसके नीचे के संस्करणों को शिमर्स की आवश्यकता होती है, या फिर अंडरस्कोर की आवश्यकता होती है। जेएस फिर आँख बंद करके उम्मीद कर रहा है कि "_" ग्लोबल वैरिएबल नहीं है, (जिसे निष्पक्ष होना उचित है)

बस इसे अंदर लोड करें

  requirejs.config({
    paths: {
        "underscore": "PATH/underscore-1.6.0.min",
    }
  });

Answer 5

मैं सीधे लिखूंगा, आप आवश्यकता पर स्पष्टीकरण पढ़ सकते हैं। ओआरजी, आप अपने रोजमर्रा के उपयोग के लिए एक स्निपेट के रूप में नीचे दिए गए कोड का उपयोग कर सकते हैं; (पीएस मैं यूमन का उपयोग करता हूं) (चूंकि कई चीजें अपडेट की गई हैं, इसे फ़रवरी 2014 तक पोस्ट करना है।)

सुनिश्चित करें कि आपने स्क्रिप्ट को अपने index.html में शामिल किया है

<!-- build:js({app,.tmp}) scripts/main.js -->
<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
<!-- endbuild -->

फिर, main.js में

require.config({
    shim: {
        'backbone': {
            deps: ['../bower_components/underscore/underscore.js', 'jquery'],
            exports: 'Backbone'
        }
    },

    paths: {
        jquery: '../bower_components/jquery/jquery',
        backbone: '../bower_components/backbone/backbone'
    }
});

require(['views/app'], function(AppView){
    new AppView();
});

app.js

/**
 * App View
 */
define(['backbone', 'router'], function(Backbone, MainRouter) {
    var AppView = Backbone.View.extend({
        el: 'body',

        initialize: function() {
            App.Router = new MainRouter();
            Backbone.history.start();
        }
    });

    return AppView;
});

मुझे आशा है कि मैं उपयोगी था!

Comments

जितना आपको पता होगा उससे ज्यादा उपयोगी। यह वही है जो मुझे मेरा, bower_compenders और सभी की एक परियोजना पर बनाने का प्रयास किया गया है। धन्यवाद @STEEL

— ड्वाइट स्पेंसर

Answer 6

require.config({
  waitSeconds: 500,
  paths: {
    jquery: "libs/jquery/jquery",
    jqueryCookie: "libs/jquery/jquery.cookie",
    .....
  },

  shim: {
    jqxcore: {
      export: "$",
      deps: ["jquery"]
    },
    jqxbuttons: {
      export: "$",
      deps: ["jquery", "jqxcore"]
    }
    ............
  }
});

require([
 <i> // Load our app module and pass it to our definition function</i>
  "app"
], function(App) {
  // The "app" dependency is passed in as "App"
  // Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
  App.initialize();
});