Dojo build -> dojo.require(); still needed?

Question

Hi everyone,

this was my first dojo build so please excuse my ignorance in this matter.

I've just created my custom build from dojo build system using the following (very simplified) profile:

dependencies = {
stripConsole: "normal",

layers: [  
 {
  name: "../dijits/cx/dijitsCXbuild.js",
  copyrightFile: "CopyrightCX.txt",
  dependencies: [
   "dojo.parser",
   "dijit.dijit",     
   "dijit._Widget",
   "dijit._Templated",
   "dijit._Container",
   "dojo.i18n",
   "dojo.NodeList-fx",
   "dojox.grid.cells",
   "dojox.grid.DataGrid",
   "dojox.layout.GridContainer",
   "dijit.TitlePane",
   "dijits.cx.TaskPanel",
   "dijits.cx.Identify"
  ]
 }
],

prefixes: [        
    [ "dijit", "../dijit" ],
 [ "dojox", "../dojox" ],
    [ "dijits.cx", "../dijits/cx" ]
]

}

... well, it all proceeds fine and I get my own package with everything I requested. Then in my webapp I include the following

<script type="text/javascript">
  djConfig = {
    isDebug:false,
    parseOnLoad:true,
    locale:getLocale()
  };
</script>

<script type="text/javascript" src="Lib/cxdojo/dojo/dojo.js"></script>
<script type="text/javascript" src="Lib/cxdojo/dijits/cx/dijitsCXbuild.js"></script>

... looks ok, until the code needs to instantiate the first dijit and it fails with the notorious : "dijits.cx. TaskPanel is not a constructor."

I can get rid of this problem by including the "dojo.require()" but that's something I though I'll get rid of by creating my custom own build. Any ideas of what am I doing wrong or what shall I do in order to avoid that 'dojo.require()' lines... thanks heaps.

Answer 1

You still need the dojo.require in your file. The compressed build just prevents the dojo.require from doing a GET request for the file that is required by concatenating all the files into one file and shrinking it. This saves cycles on page load quite a bit (as I'm sure you have seen by now).

If you really want to get rid of the many dojo.require (which I'm not too crazy about because I like seeing what's used in the page), you can do something like this:

dojo.provide('my.main');
dojo.require('dijit.cx.TaskPane');
... all the other dojo.require statements ...

Then put this in a file in a directory parallel to dojo:

  Lib/cxdojo/my/main.js
  Lib/cxdojo/dojo/dojo.js
  .. etc ...

Then change your dependencies to be:

           dependencies: [
                    "my.main"
            ]

Then in your file, you can include it with the script tag:

 <script type="text/javascript" src="Lib/cxdojo/my/main.js"></script>

Then, you only need one require:

  dojo.require('my.main');

Another advantage of this approach is that you only need to change one file (the /my/main.js) when you add a module to your application.