How does a minimum build configuration for dojo look like?

Question

How does a minimum build configuration for dojo look like?

2k views Asked by Maximilian Hils At 06 September 2024 at 08:51

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.

Original Q&A

There are 1 answers

**mschr** · Accepted Answer · 2012-08-16 20:19:41

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)

Howto create main application layer sutured together with dojo.js

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" ]
]

Howto create sub module layer

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.

Putting it together in HTML

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>

TechQA.

How does a minimum build configuration for dojo look like?

There are 1 answers

Howto create main application layer sutured together with dojo.js

Howto create sub module layer

Putting it together in HTML

Related Questions in DOJO

Related Questions in DOJO-BUILD

Popular Questions

Popular Tags

Trending Questions