Durandal's core is written using the Asynchronous Module Definition pattern, which allows users to define their module and load their dependencies asynchronously, a must have for any web-based application. It takes the following form:
For example, Durandal's
viewEngine module has a dependency on it's own
system module, as well as jQuery, and is written as:
This syntax will likely comprise the large majority of your existing application code, and whilst Webpack can understand this format natively, the benefits on enclosing the whole module within a closure are lost. Since Webpack bundles the modules within the same script, we no longer require an asynchronous definition format, and can instead opt for the simpler CommonJS alternative..
The CommonJS module format is the synchronous sibling to AMD, and is the primary module format for Node.js, which I'm sure you'll all be familiar with. It has a slightly different syntax to AMD. For example, here's the previous
viewEngine module rewritten in CommonJS syntax:
Note some of the key differences here:
definemethod or closure. Your code is isolated by default, and requires explicit export.
- Dependencies are denoted and retrieved by the use of the
- Exporting functionality is done using the special
modulevariable, as opposed to a
Though this may appear more verbose the the equivalent AMD syntax, it's arguably more readable, and does away with the need for additional closures within your code.
Okay... so what?
As stated before, Webpack natively understands the AMD
define method and it's syntax, so you don't have to do anything right away. In fact, you could continue on using the same syntax you've been using and everything should bundle as expected.
I would however recommend taking up the CommonJS format for future code, and slowly migrating old code to it where feasible. The advantages of the AMD approach are lost with bundlers like Webpack, and in my opinion make your code less readible.
CommonJS is the format I'll be using throughout this guide when dealing with code samples.