This is a small collection of scripts showing how to use require.js. It's only one of several ways of setting up a require.js project, but it's enough to get started.
At its core, require.js is about three things:
The following files show how these are achieved.
(You can see this code in action here: http://williambowers.net/sandbox/requirejs/)
| // path: /js/modulename.js | |
| // This is how you define a module with dependencies. require.js will take care of | |
| // situations where this file is loaded before its dependencies. | |
| // require.js uses the file name as the module name. This module will be referenced | |
| // as "modulename" when required by other modules. | |
| define(["list", "of", "dependencies"], function(list, of, dependencies) { | |
| // Now you have access to the "list", "of", and "dependencies" modules. require.js | |
| // doesn't care what you do with them or what you put here, just as long as you | |
| // return an object. What you return here is what other modules will get when | |
| // "requiring" this module. | |
| return { | |
| list: list, | |
| of: of, | |
| dependencies: dependencies | |
| }; | |
| }); |
| // path: /js/list.js | |
| define(function() { | |
| return ["a", "list"]; | |
| }); |
| // path: /js/of.js | |
| define(function() { | |
| return "the word 'of'"; | |
| }); |
| // path: /js/dependencies.js | |
| define(["list"], function(list) { | |
| return { | |
| "a dependency": list | |
| }; | |
| }); |
| // path: /js/modulewithnodeps.js | |
| // If your module is a simple object with no dependencies (like perhaps an object with some | |
| // i18n strings), you can define it like so: | |
| define({ | |
| this: "is", | |
| just: ["an", "object"] | |
| }); |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>require.js example</title> | |
| </head> | |
| <body> | |
| <!-- This is the only script tag you need to have in your html. Everything else is loaded by require.js --> | |
| <script src="/js/require.js" data-main="/js/config"></script> | |
| </body> | |
| </html> |
| // path: /js/config.js | |
| // require.config lets you tell require where certain modules exist, how to load | |
| // libraries, etc. | |
| // This file is loaded automatically by require.js because we referenced it in | |
| // the 'data-main' attribute when including the require.js library. | |
| require.config({ | |
| // main.js is your application starting point (call it whatever you want). This | |
| // references /path/to/configjs/main.js, in this case: /js/main.js | |
| deps: ["main"] | |
| // You can do more with require.config, such as managing dependencies not built | |
| // with require.js, but this is really all you need to get started. | |
| }); |
| // path: /js/main.js | |
| // This is how you use modules without defining a new module at the same time. Think | |
| // of this as "import ..." or "include ...". | |
| require(["modulename", "modulewithnodeps"], function(modulename, modulewithnodeps) { | |
| // Prints: modulename: {"list":["a","list"],"of":"the word 'of'","dependencies":{"a dependency":["a","list"]}} | |
| console.log("modulename:", JSON.stringify(modulename)); | |
| // Prints: modulewithnodeps: {"this":"is","just":["an","object"]} | |
| console.log("modulewithnodeps:", JSON.stringify(modulewithnodeps)); | |
| }); |
Obviously it gets more complicated than that:
But this should be a good jumping-off point.