grunt और r.js/requirejs

Question

का उपयोग करके मैन्युअल रूप से बूटस्ट्रैप करने के लिए कोणीय प्राप्त करना मैं एक मौजूदा प्रोजेक्ट में आवश्यकताएं एकीकृत करने की कोशिश कर रहा हूं, जो नोड/ग्रंट स्टैक पर चलता है। मैं r.js ऑप्टिमाइज़र का उपयोग सब कुछ एक साथ जोड़ना और निर्भरता के माध्यम से अपने जादू करने के लिए नूडल का उपयोग करना चाहता हूं।

मैं एक .js फ़ाइल बनाने के लिए r.js प्राप्त करने में सक्षम हूं, और कोई त्रुटि नहीं है ... लेकिन कुछ भी नहीं होता है। मैंने अपने कोड में ब्रेकपॉइंट्स सेट किए हैं, लेकिन कुछ भी नहीं निकल रहा है - ऐप वास्तव में कभी भी बूटस्ट्रैप.जेएस फ़ाइल चलाता है। मैंने bootstrap.js को तत्काल फ़ंक्शन में डालने का प्रयास किया है, और निश्चित रूप से यह तब चलता है, लेकिन निर्भरता अभी तक लोड नहीं होती है (ऐसा लगता है)। मुझे यहां क्या समझ नहीं आ रहा है?

फ़ाइल संरचना:

app 
-> modules 
- -> common 
- - -> auth.js // contains an auth call that needs to return before I bootstrap angular 
-> app.js 
-> index.html 
config 
-> main.js 
node_modules 
vendor 
-> angular/jquery/require/domready/etc 
gruntfile.js 

gruntfile requirejs कार्य:

requirejs: { 
    compile: { 
    options: { 
     name: 'app', 
     out: 'build/js/app.js', 
     baseUrl: 'app', 
     mainConfigFile: 'config/main.js', 
     optimize: "none" 
    } 
    } 
}, 

main.js config:

require.config({ 
    paths: { 
    'bootstrap':  '../app/bootstrap', 
    'domReady':  '../vendor/requirejs-domready/domReady', 
    'angular':  '../vendor/angular/angular', 
    'jquery':  '../vendor/jquery/jquery.min', 
    'app':   'app', 
    'auth':   '../app/modules/common/auth', 
    requireLib:  '../vendor/requirejs/require' 
    }, 
    include: ['domReady', 'requireLib'], 

    shim: { 
    'angular': { 
     exports: 'angular' 
    } 
    }, 

    // kick start application 
    deps: ['bootstrap'] 
}); 

app.js:

define([ 
    'angular', 
    'jquery', 
], function (angular, $) { 
    'use strict'; 

    $("#container").css("visibility","visible"); 

    return angular.module('app'); 
}); 

bootstrap.js:

define([ 
    'require', 
    'angular', 
    'app', 
    'jquery', 
    'auth' 
], function (require, angular, app, $, auth) { 

    var Authentication = auth.getInstance(); 
    .. do auth stuff... 

     if (Authentication.isAuthorized) { 
     require(['domReady!'], function (document) { 
      angular.bootstrap(document, ['app']); 
     }); 
    } 
); 

Answer 1

आप अपनी ऐप्लिकेशन में प्रवेश का एक मुख्य बिंदु स्थापित करने के लिए की जरूरत है; यहां यह app.js होगा, लेकिन आप उस फ़ाइल में जो भी कर रहे हैं वह फाइल निर्भरता को परिभाषित कर रहा है और वास्तव में कोई कोड लोड नहीं कर रहा है। आप इस के लिए अपने कोड को बदलने की जरूरत:

require([ 
    'angular', 
    'jquery', 
], function (angular, $) { 
    'use strict'; 

    $("#container").css("visibility","visible"); 

    return angular.module('app'); 
}); 

the difference between define and require के बारे में अधिक जानकारी के लिए इस धागे देखें।