Getting eckig zum manuellen Bootstrap mit grunt und r.js/requirejs

Question

Ich versuche Requirejs in ein bestehendes Projekt zu integrieren, das auf einem Knoten/Grunt-Stack läuft. Ich möchte den r.js-Optimierer verwenden, um alles zusammen zu fassen und durch Abhängigkeiten zu nudeln, um seine Magie auch zu tun.

Ich bin in der Lage, r.js eine einzige .js-Datei zu erstellen, und es gibt keine Fehler ... aber nichts passiert. Ich setze Haltepunkte in meinen Code, aber nichts wird gestartet - die App läuft nie die Bootstrap.js-Datei. Ich habe versucht, die bootstrap.js in eine sofortige Funktion zu setzen, und natürlich läuft es dann, aber die Abhängigkeiten sind noch nicht geladen (es scheint). Was fehlt mir hier?

Dateistruktur:

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 Aufgabe:

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

Sie benötigen einen Haupteintrittspunkt in die Anwendung einzurichten; Hier wäre es app.js, aber alles, was Sie in dieser Datei tun, ist die Definition dieser Dateien Abhängigkeiten und nicht wirklich laden von Code. Sie müssen Ihren Code, dies ändern:

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

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

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

dieses Thema auf the difference between define and require für mehr Details.