depsDeclarative¶
| Author: | Kitson Kelly |
|---|
Contents
Scans appropriately tagged resources for any declarative module dependencies and adds them to a layer. This is designed to specifically compliment the dojo/parser features of auto-require and declarative require.
Description¶
Modules or resources tagged with declarative will be scanned for their declarative dependencies. Then each layer of the build will be inspected for the module/resource and be replaced with the appropriate dependencies.
Using the auto-require feature, but not building your dependencies into a layer could dramatically decrease the performance of your production application. This provides you a mechanism to use the feature without needing to worry about explicitly requiring your modules in JavaScript. For example if you have the following resource of index.html in your application:
<div data-dojo-type="dijit/layout/ContentPane">
<button type="button" data-dojo-type="dijit/form/Button">Click Me!</button>
</div>
The dojo/parser will automatically load dijit/layout/ContentPane and dijit/form/Button if they are not
already loaded. If you then, in your build profile, tag the resource as declarative:
resourceTags: {
declarative: function(filename){
return /\.htm(l)?$/.test(filename); // tags any .html or .htm files as declarative
}
}
And then include it in a layer (like your dojo/dojo one):
layers: {
"dojo/dojo": {
include: [ "dojo/dojo", "app/index.html" ],
customBase: true,
boot: true
}
}
Then you will get a built layer that includes dijit/layout/ContentPane and dijit/form/Button plus all the
necessary dependencies. The name of the file to be scanned for dependencies needs to be a resolvable Module ID (MID)
by the builder, which usually means that the file is within a package and identified in your package map within the
build profile, for example, in the above situation, you might have a packages property of:
packages:[{
name: "dojo",
location: "../dojo"
},{
name: "dijit",
location: "../dijit"
},{
name: "dojox",
location: "../dojox"
},{
name: "app",
location: "./app"
}]
It is worthy to note that the builder will not “build” your resources into the layer, like if you used the
dojo/text plugin, where the resource would be loaded and in-lined into the layer, it simply scans the resource for
dependencies.
The transform also supports the declarative require syntax. Therefore if you have something like:
<script type="dojo/require">
on: "dojo/on"
</script>
And that resource is also tagged and included in a layer, the dojo/on module would be added as a dependency.
See Also¶
- dojo/parser - The Dojo declarative syntax parser.