Einrichten von require.js für eine statische Website und Laden von benutzerdefiniertem Code, als wäre es eine Bibliothek

Question

Ich bin neu im Stack-Überlauf und ich war wirklich neugierig auf meine require.js-Einrichtung, weil es das erste Mal ist, dass ich benutze Wenn ich viele verschiedene Ansätze/Beispiele gesehen habe, bin ich mir nicht sicher, ob das, was ich bisher gemacht habe, richtig ist. Also, auf meinem Index habe ich auf dem „Kopf“

<script data-main="js/app" src="js/vendor/require-2.2.0-min.js"></script> 

und am Ende meines ‚body‘ ich den Google Analytics-Snippet habe. Kein anderes Skript wird direkt aus dem Index geladen.

Auf app.js, die in meinem $ projectroot/js Ordner ist, ich habe:

requirejs.config({ 
    "baseUrl": "js/vendor", 
    "paths": { 
     "app": "..", 
     "jquery" : ['//code.jquery.com/jquery-1.12.4.min','jquery-1.12.4.min'], 
     "modernizr" : 'modernizr-2.8.3-respond-1.4.2.min', 
     "bootstrap" : ['//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min','bootstrap.min'], 
     "plugins": '../plugins' 
    }, 
    "shim": { 
     "bootstrap": ["jquery"], 
     "plugins": ["bootstrap"] 
    } 
}); 

requirejs(["app/main"]); 

Auch meine main.js, die mit app.js auf demselben Ordner enthält:

define([ 
    "jquery", 
    "modernizr", 
    "bootstrap", 
    "plugins" 
], function($) 
{ 
$(function() 
{ 
console.log('required plugins loaded...'); 
}); 
}); 

Schließlich ist meine plugins.js keine Bibliothek, aber einige benutzerdefinierte js-Code, die ich zuletzt geladen werden muss. Ist das soweit in Ordnung? Irgendwelche Nachteile mit diesem Ansatz? Wäre es in Ordnung, den Rest meines benutzerdefinierten js-Codes auf ähnliche Weise hinzuzufügen? Vielen Dank für Ihre Antworten !!

Answer 1

Ihre Frage zu beantworten, das einzige, was ich Datei entsprechen, indem die globalen dependecies in Ihrem main.js ändern würde:

define([ 
    "jquery", 
    "modernizr", 
    "bootstrap", 
    "plugins" 
] 

in Ihre app.js Datei wie folgt:

requirejs(["app/main","jquery","modernizr","bootstrap","plugins"]); 

Das bedeutet, dass Ihre globalen Abhängigkeiten nicht nur in Ihrer main.js-Datei, sondern in allen Ihren Modulen geteilt werden. Dies bedeutet, dass Sie sie nicht in jede Datei aufnehmen müssen, die Sie verwenden möchten.

Abgesehen davon sieht es gut aus