Contrary to the CLI or the Webpack-based skeleton, the JSPM-based skeleton doesn't bundle the application automatically when running in a development environment. It however contains a Gulp task dedicated to bundling:
> gulp bundle
This task will create some bundles according to the bundling configuration. It will also update the SystemJS mapping in the config.js file, so the loader knows to load each module from the proper bundle.
This means that if you do manual deployment from your development environment instead of using an automated build system, you'll need to unbundle your application after deployment:
> gulp unbundle
This command will reset the SystemJS mapping in the config.js file to its original, unbundled state. It is however automatically called when running the watch task, so you shouldn't have to manually run it very often.
The bundling configuration can be found in the build/bundles.js file. It looks like this:
build/bundles.js
module.exports = {
"bundles": {
"dist/app-bundle": {
"includes": [
"[**/*.js]",
"**/*.html!text",
"**/*.css!text"
],
"options": {
"inject": true,
"minify": true,
"depCache": true,
"rev": true
}
},
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-bootstrapper",
// Omitted snippet...
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": true
}
}
}
};
By default, this configuration describes two bundles:
app-build: Contains all JS modules, templates, and CSS files from thesrcdirectoryaurelia: Contains the Aurelia libraries, Bootstrap, the fetch polyfill, and jQuery
The brackets around the app-build bundle's JS glob pattern [**/*.js], tell the bundler to ignore dependencies. Without those brackets, the bundler would recursively walk up every import statement of every JS file, and would include all dependencies in the bundle. Since the default bundling configuration packages the application's resources in a first bundle and all external dependencies in a second, we don't want to include any dependency in the app-build bundle, hence the brackets.
When adding an external library to your application, you'll need to add it to a bundle's includes, typically it would be in the aurelia bundle, which I normally rename to vendor-bundle. If you don't, SystemJS's mapping will refer to the unbundled library, and will try to load it from the jspm_packages directory, which is not what we want in a production scenario.
In addition to its content, the configuration of a bundle has options. The most useful of those options is probably rev, which, when set to true, enables bundle versioning. As such, the name of each bundle will be appended with a content-based hash, and the SystemJS mapping will be updated with those versioned bundle names.