Categories

Configurando RequireJS

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();
   });
  });
 }
});

Leave a Reply

Blog Archive

Download

Javier Prieto Diaz. Con la tecnología de Blogger.