Menu
I studied the build tutorial, found the web build (1.7.2 only), and tested several examples - however, I could not find an easy explanation of the build system.
Let's say my app is a single web page:
<script src="./js/App/other_non_amd_stuff_working_independently.js">
<script src="./js/lib/dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="./js/App/Main.js">
The Dojo SDK is in ./lib/, Main.js contains the Dojo config + app boot:
require({
packages:[{
name:"App",
location:"../../App"
}]
},
[ "dojo/query",
"dijit/layout/BorderContainer",
"App/Foo",
"dojo/domReady!"], function(query, BorderContainer, Foo) { ... });
My question now is as simple as this: How can I create one single script file out of all my Dojo/AMD stuff? I just want to replace
<script src="./js/lib/dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="./js/App/Main.js">
with a single
<script src="./js/Main.minified.js">
Getting the build system to work on this seems somewhat non-trivial. It either trys to convert all files in ./App/ to AMD modules (that's not what I want .. yet) or fails to find App/Main. I tried building a build profile (app.profile.js), but I don't get the point of this except that it's adding (IMO unnecessary) complexity. How can I make the build system just concatenate my App/Main.js incl. dependencies ?
Any hints for better tutorials on understanding the build system are appreciated, too.
612
Techopedia Explains Dojo ToolkitThe toolkit provides a framework for creating code modules and for defining and managing their dependencies, and also the necessary tools for building and optimizing CSS and JavaScript, doing unit testing and creating documentation.
See this QnA for building your layer into the dojo.js file. I might as well share my experiences, as it has taken me a few trial and errors to get my bootstraps working properly. Actually the answer is easily found within the 'dojosdk/util/buildscripts/profiles/baseplus.profile.js' file.
Dojo Custom Build 1.6 into a single file (same setup as new buildsystem, may still undergo a few changes for 2.0 though)
dependencies ={
layers: [
{
name: "dojo.js", // overwrites regular dojo.js and ++'s your layer
dependencies: [
"app.main"
]
}
}
Remember to prefix locations properly
Since youre having the 'App' module placed outside the dojo SDK root, the same would need to be applied as you assign packages in dojoConfig. The attribute key though, is instead prefixes for a layer profile.
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "App", "../../App" ]
]
You may want to build a sub-module of your App, so that if a popup-dialog for instance requires extra extra - they can be downloaded at runtime in a separate package. To make sure that dependencies, which are allready loaded through your main-module-layer is not included in the sub-module-layer, the attribute key youre looking for is layerDependencies.
It would look like this for a combined result:
dependencies ={
layers: [
{
name: "../dojo/dojo.js", // overwrites regular dojo.js and ++'s your layer
dependencies: [
"app.Main"
]
}, {
name: "../../App/JITModule.js",
layerDependencies: [
"../../App/Main" // tells this layer that the dependencychain in Main is allready loaded (programmer must make sure this is true ofc)
]
dependencies: [
"App.JustInTimeDialog"
]
}
]
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "App", "../../App" ]
]
}
This should result in two optimized layerfiles, one with the standard one-line-dojo.js plus a dojo.cache entry, containing the files from your App. Example usage follows. Note, that you still need to call require for any cached modules or they will simply remain in the cache.
NOTE Putting your dojoConfig into the ./js/App/Main.js file will not work as expected, dojo.js regular contents are loaded above the layers.
<head>
<script>
function JITDialog() {
require([ "App.JITDialog" ], function(dialoglayer) {
var dialog = new App.JustInTimeDialog();
dialog.show();
});
}
var dojoConfig = {
async: true,
packages:[{
name:"App",
location:"../../App"
}]
}
</script>
<script src="./js/lib/dojo/dojo.js"></script>
<script>
require("App.Main", function() {
// loads the layer, depending on the structure of App.Main class,
// you can call your initializations here
var app = new App.Main();
app.run();
});
</script>
</head>
<body>
<button onclick="JITDialog();">
Download sub-module-layer and show a dialog on user interaction
</button>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
