RequireJS Text Plugin installiert mit Bower

Question

Wie sollte ich requirejs-text verwenden, die über Bower installiert ist? Ich soll es in baseUrl setzen, aber frage mich, ob ich es von components/requirejs-text/ verwenden könnte? Was ist die beste Praxis?

Answer 1

Definieren Sie den Pfad zum Plugin in der config:

requirejs.config({ 
    paths: { 
     "text" : "components/requirejs-text/text" 
    } 
}, 

Und verwenden Sie es in Ihrem Modul wie auf https://github.com/requirejs/text dokumentiert:

require(["some/module", "text!some/module.html", "text!some/module.css"], 
    function(module, html, css) { 
     //the html variable will be the text 
     //of the some/module.html file 
     //the css variable will be the text 
     //of the some/module.css file. 
    } 
); 

Sie können auch das Plugin technisch nutzen verwenden, ohne die Pfadangabe im requirejs.config, aber dies ist nicht propbably Best Practice:

require(["your_path_to_the_plugin_from_baseurl/without_js_at_the_end!some/textfile"], 
    function(yourTextfile) { 
    } 
); 

Answer 2

Dies ist, wie ich requirejs-Text installieren mit Bower

In Ihrem Projekt bower.json Datei:

{ 
    "name":"{{YOUR PROJECT NAME}}", 
    "version":"{{YOUR PROJECT VERSION}}", 
    "dependencies":{ 
     "requirejs-text":"2.0.6" 
    } 
} 

Answer 3

in PROJECT_APP/bower.js fügen Sie diese Zeile unter dem Abschnitt Abhängigkeiten:

"requirejs": "~2.1.8", 
"requirejs-text":"~2.0.10", // this is new 
"qunit": "~1.12.0", 

dann bower install ausführen, sollte dieses Plugin installieren und am Ende einen Pfad wie requirejs-text#2.0.10 vendor/bower/requirejs-text anzeigen (hängt von Ihrer Konfiguration ab).

schließlich in der config.js Datei, fügen Sie diese Zeile unter

require.config({ 
    paths: { 

     // Make vendor easier to access. 
     "vendor": "../vendor", 
     // Almond is used to lighten the output filesize. 
     "almond": "../vendor/bower/almond/almond", 

     // add the requirejs text plugin here 
     "text" : "../vendor/bower/requirejs-text/text", 

     // Opt for Lo-Dash Underscore compatibility build over Underscore. 
     "underscore": "../vendor/bower/lodash/dist/lodash.underscore", 

     // Map remaining vendor dependencies. 
     "jquery": "../vendor/bower/jquery/jquery", 
     "backbone": "../vendor/bower/backbone/backbone" 
    } 

}); 

Dann, es zu benutzen, benötigen sie einfach, in diesem Fall, dass Sie es mit der template Variable zugreifen können

define([ 
    // These are path alias that we configured in our bootstrap 
    'app',  // general app variables 
    'jquery',  // lib/jquery/jquery 
    'underscore', // lib/underscore/underscore 
    'backbone', // lib/backbone/backbone 
    'text!templates/books.html' // use the plugin to import a template 
], function(app,$, _, Backbone, template){ // don't forget to define it !