An AMD loader plugin for loaders like RequireJS that will load scripts in steps.
This allows you to load traditional scripts that do not use AMD in a sequential fashion.
You should prefer the built-in
shim
config in RequireJS to
step
, since it is more expressive and allows you to get local exports
references.
If you have a bunch of scripts with dependency sets that would make
shim
hard to use, then this plugin may help.
step
only works with AMD loaders that support
module config, like
RequireJS 2.0.
First, set up a module config for step
and list out the steps in a steps
property:
require.config({
config: {
step: {
steps: [
['one'],
['two'],
['three'],
['four']
]
}
}
});
In this example, four depends on three, two and one being loaded in order.
Then, to load a dependency along with anything in previous steps, use the
step!
loader prefix ID:
define(['step!four'], function () {
//one.js, two.js and three.js will have also been
//loaded by the time this function is called.
//four.js creates a global `four` variable,
//and it does not call define() so there
//will not be a local `four` reference
//passed to this function. Use the global
//`four` instead.
console.log(four.doSomething());
});
If you know that a script depends on two different scripts that each do not depend on each other, then you can put them in the same step. For instance, if "three" depended on "one" and "two" and "one" and "two" did not depend on each other:
require.config({
config: {
step: {
steps: [
['one', 'two'],
['three'],
['four']
]
}
}
});
All the scripts in a step are loaded async and can load out of order, so it is important that they do not depend on each other.
- Only use
step
with scripts that do not already call define(). Similarly, do not include scripts instep
that depend on AMD modules. - It is slower loading than loading plain AMD modules.
step
waits for each previous step to complete loading before doing the next step. Doing an r.js optimization build when you are ready to deploy your code is strongly suggested. - When doing a build, include all the steps in the build output. If you use an
exclude
directive to exclude a step script, it will likely break when that built file is run in the browser. step
will read the step config the first time it is called, and "burn in" that config internally. So, it will not understand any further step config if it is set after the firststep!
reference.
MIT