Empecemos fuerte con un ejemplo completo (y real) de un archivo de configuracion para requireJS.
require({
// Aliases para nuestros archivos, esto quiere decir que cuando requiramos alguno de estos paquetes en alguno de nuestros modulos
// podremos hacerlo escribiendo directamente el nombre de el paquete que especifiquemos aqui en vez de toda la ruta al paquete que tenemos
// escrita en "location".
"packages": [
{
"name": "bootstrap",
"location": "bower_components/bootstrap/dist"
},
{
"name": "jquery",
"location": "bower_components/jquery/dist",
"main": "jquery.min"
},
{
"name": "poly",
"location": "bower_components/poly",
"main": "es5"
},
{
"name": "when",
"location": "bower_components/when",
"main": "when"
},
{
"name": "requirejs-text",
"location": "bower_components/requirejs-text"
},
{
"name": "require-css",
"location": "bower_components/require-css"
},
{
"name": "mu-template",
"location": "bower_components/mu-template"
},
{
"name": "jsonselect",
"location": "bower_components/jsonselect/src",
"main": "jsonselect"
},
{
"name": "markdown",
"location": "bower_components/markdown/src",
"main": "markdown"
},
{
"name": "moment",
"location": "bower_components/moment",
"main": "min/moment.min"
},
{
"name": "audio5js",
"location": "bower_components/audio5js",
"main": "audio5.min"
},
{
"name": "fastclick",
"location": "bower_components/fastclick/lib",
"main": "fastclick"
},
{
"name": "query-string",
"location": "bower_components/query-string",
"main": "query-string"
},
{
"name": "spin",
"location": "bower_components/spin.js",
"main": "spin"
},
{
"name": "troopjs",
"location": "bower_components/troopjs",
"main": "maxi.min"
},
{
"name": "troopjs-contrib-com",
"location": "bower_components/troopjs-contrib-com"
},
{
"name": "troopjs-contrib-audio5js",
"location": "bower_components/troopjs-contrib-audio5js"
},
{
"name": "troopjs-contrib-audio5js-player",
"location": "bower_components/troopjs-contrib-audio5js-player"
},
{
"name": "troopjs-contrib-markdown",
"location": "bower_components/troopjs-contrib-markdown"
},
{
"name": "troopjs-contrib-bootstrap",
"location": "bower_components/troopjs-contrib-bootstrap"
},
{
"name": "athena-client",
"location": "."
},
{
"name": "has",
"location": "bower_components/has",
"main": "has"
},
{
"name": "jquery-cookie",
"location": "bower_components/jquery-cookie",
"main": "jquery.cookie"
}
],
// paquetes de configuracion
"config": {
"troopjs-contrib-com/config": {
"type": "type",
"children": "components",
"completed": "completed",
"component": "widget"
},
"athena-client/config": {
"key": "value"
}
},
"shim": {
"bootstrap/js/bootstrap.min": {
"deps": [ "jquery" ]
},
"jsonselect/jsonselect": {
"deps": [ "poly/json" ],
"exports": "JSONSelect"
}
},
// Mapeando paquetes, esto es similar a package pero siendo mas restrictivo.
// En el primer caso, con * decimos que podemos usar estos nombres en cualquiera de nuestros componentes
// con el segundo ejemplo athena-client/component/signal/start decimos que solo podemos usar el mapeo
// "troopjs-contrib-com/signal/start": "troopjs-contrib-com/signal/start" en el componente "athena-client/component/signal/start"
"map": {
"*": {
"json": "troopjs-requirejs/json",
"shadow": "troopjs-requirejs/shadow",
"text": "requirejs-text/text",
"css": "require-css/css.min",
"mu": "mu-template/plugin",
"troopjs-contrib-com/signal/start": "athena-client/component/signal/start"
},
"athena-client/component/signal/start": {
"troopjs-contrib-com/signal/start": "troopjs-contrib-com/signal/start"
},
"troopjs-contrib-com/loom/weave": {
"audio-check": "athena-client/audio-check/widget",
"audio-play": "athena-client/audio-play/widget",
"carousel": "athena-client/carousel/widget",
"dialog": "athena-client/dialog/widget",
"instructions": "athena-client/instructions/widget",
"module": "athena-client/module/widget",
"multiple-choice": "athena-client/multiple-choice/widget",
"multiple-choice-score-plain": "athena-client/multiple-choice-score-plain/widget",
"placeholder-static": "athena-client/placeholder-static/widget",
"placeholder-module": "athena-client/placeholder-path/widget",
"placeholder-result": "athena-client/placeholder-path/widget",
"placeholder-test": "athena-client/placeholder-test/widget",
"page": "athena-client/page/widget",
"poster": "athena-client/poster/widget",
"progress": "athena-client/progress/widget",
"result": "athena-client/nop/widget",
"stimulus": "athena-client/stimulus/widget",
"speaker-match": "athena-client/speaker-match/widget",
"set": "athena-client/set/widget",
"task": "athena-client/task/widget",
"test": "athena-client/test/widget",
"timer-persisted": "athena-client/timer-persisted/widget",
"timer-transient": "athena-client/timer-transient/widget"
}
},
"bundles": {
"troopjs": [
"troopjs-dom/application/widget",
"troopjs-net/ajax/service"
]
},
"deps": [
"require",
"jquery",
"fastclick",
"bootstrap/js/bootstrap.min"
],
"callback": function (localRequire, jQuery, FastClick) {
// Add document ready handler
jQuery(function ($) {
var body = document.body;
// Fix mobile touch
FastClick.attach(body);
// Chrome allows you to click `forbidden` elements inside buttons
$(body).on("click", "button > span.glyphicon-play", function ($event) {
return $($event.target)
.parent()
.click();
});
});
// Require additional modules and start TroopJS
localRequire([
"troopjs-dom/application/widget",
"troopjs-net/ajax/service"
], function (Application, Ajax) {
jQuery(function ($) {
Application($("html"), "bootstrap", Ajax()).start();
});
});
}
});