Skip to content

Instantly share code, notes, and snippets.

@willurd
Last active August 7, 2024 06:24
Show Gist options
  • Save willurd/6054834 to your computer and use it in GitHub Desktop.
Save willurd/6054834 to your computer and use it in GitHub Desktop.
A short introduction to require.js

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:

  1. Dependency management
  2. Modularity
  3. Dynamic script loading

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:

  1. You can manage libraries that weren't built with require.js in mind.
  2. You can compile all of your modules down to a single file using r.js (I compile them down to require.js itself because the html is already including it :). Saw someone do that and it works nicely. Just maintain a require.js.tmpl or something to go back to "development" mode).
  3. There are many more configuration options.
  4. require.js has a plugin system that I haven't used much, but can be used to include things like ascii templates that aren't evaluated as scripts, but passed in as arguments just the same.

But this should be a good jumping-off point.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment