Reputation: 7990
I have a simple Dojo 1.8 AMD web app. It has a couple of bootstrap files for different MVC views, and 3 custom modules. I want to build the two bootstrap files to include their relative dependencies.
File structure
- js
- tournament_organiser
- Alert
- templates
- Alert.html
- ImportDialog
- templates
- ImportDialog.html
- SquadronPicker
- templates
- SquadronPicker.html
- Alert.js // module
- config.js // Dojo config file
- form_run.js // bootstrap for "from" view
- list_run.js // bootstrap for "list" list
- package.json
- ImportDialog.js // module
- SquadronPicker.js // module
- tournament_organiser.profile.js
- dojo_toolkit
- dojo
- dijit
- dojox
I want to build 2 layer files, one for each bootstrap. Each contains several Dijit requires for declarative widgets in the view, plus form_run.js
uses the custom modules.
So far, I have this for package.json
:
{
"name": "tournament_organiser",
"description": "Tournament organiser app for X-Wing Miniatures Game",
"version": "0.1",
"dependencies": {
"dojo": "~1.8.5",
"dijit": "~1.8.5",
"dojox": "~1.8.5"
},
"main": "src",
"homepage": "http://xwing-builder.co.uk/tournament",
"dojoBuild": "tournament_organiser.profile.js"
}
And this for tournament_organiser.profile.js
:
var profile = (function(){
return {
resourceTags: {
// tag all.js files as modules
amd: function(filename, mid) {
return /\.js$/.test(filename);
}
},
basePath: "./",
releaseDir: "../tournament_organiser_built",
action: "release",
packages:[{
name: "dojo",
location: "../dojo_toolkit/dojo"
},{
name: "dijit",
location: "../dojo_toolkit/dijit"
},{
name: "dojox",
location: "../dojo_toolkit/dojox"
},{
name: "squad_builder",
location: "../squad_builder"
}],
// this is the bit I'm stuck on... how do I define layers for each bootstrap?
layers: {
"form_run": {},
"list_run": {}
}
};
})();
An example bootstrap file (form_run.js
):
require( [ 'dojo/parser',
'dojo/on',
'dijit/registry',
'dojo/dom',
'dojo/dom-style',
'dojo/_base/array',
'dojo/_base/lang',
'dojo/aspect',
'squad_builder/loadingPane',
'tournament_organiser/SquadronPicker',
'tournament_organiser/Alert',
// used by declarative dijits on page
'dijit/form/Button',
'dijit/form/Form',
'dijit/form/ValidationTextBox',
'dijit/form/DateTextBox',
'dijit/form/NumberSpinner',
'dijit/form/CheckBox',
'dijit/form/Select',
'dijit/form/FilteringSelect',
'dojo/domReady!' ],
function ( parser, on, registry, dom, domStyle, array, lang, aspect, loadingPane, SquadronPicker, alert )
{
...
} );
How do I tell the build tool to read my bootstraps to find the necessary dependencies, and bundle them all up into a single file?
Also, is it possible to output just the built layers without copying over all of the Dojo Toolkit? In production, I use the Google CDN-hosted Dojo, so would only need my layer to be included on the page.
In fact, I would prefer to just put the built layers into the same folder as the source and then load the layers in production and the original files in development. Is this a bad idea?
Edit:
I tried:
layers: {
"form_run": { include: [ "tournament_organiser/form_run" ] },
"list_run": { include: [ "tournament_organiser/list_run" ] }
}
But got a lot of warnings and an error: http://pastebin.com/Yqz5zhT1
Upvotes: 2
Views: 257