CODEWITHSUNDEEP
javascripthtmlrequirejssingle-page-applicationdurandal
tugberk
tugberk

Reputation: 58444

Bundling a durandal single page application into one HTML page

I have a very strange requirement that I need to bundle everything together in one HTML page with my Durandal Single Page application. I can make this away with my dependencies as I am defining them with a name:

define("models.mapper", [], function() {

});

However, it seems like it will not be possible to bundle durandal stuff as it defines modules without names:

define(['require', 'jquery'], function(require, $) {
    // ....
}

This is fine when you want to make it work with path references but it seems like this will make it hard to inline this into HTML. Any ideas or suggestions on this?

Upvotes: 0

Views: 83

Answers (1)

diadical
diadical

Reputation: 197

Require.JS requires you to have only one anonymous define per file so that it can use the file path+name relative to the base path to give it a name. If you would like to have the durandal source inline on your page as well then you'll need to update their define lines to give them the appropriate names (i.e. define('durnadal/system', ......).

An easier approach may be to just build your source code in the structure of a normal durandal project and then use the RequireJS optimizer (http://requirejs.org/docs/optimization.html) to build them into a single JS file - if you configure this correctly without minification then you can just paste the file contents into a script tag on your page and it'll still be legible!

If you really wanted to you could then just continue developing in the single HTML file however you really should look at automating all of this into a grunt workflow and it shouldn't be too hard and you'll have much easier to manage code. Note that you may even be able to use the durandal grunt task to do this, but I'm not sure what options it allows you to provide but you can definitely use the requirejs grunt task and build it into your workflow without minification. With some templating task you could then inject that output into your final HTML page.

Upvotes: 1

Related Questions