How to build durandal app using requirejs?

Question

I'm using gulp-durandal but it only support building into one single file.

Now I want to use requirejs and the bundles feature, but can't make it work yet.

This is the gulp file I used:

var requirejs = require('requirejs');
var gulp = require('gulp');

var requireJsOptimizerConfig = {
    out: '../dist/main-built.js',
    baseUrl: 'app',
    name: 'main',
    paths: {
        requireLib: '../scripts/require',
    },
    include: [
        "requireLib",
    ],
    insertRequire: ['main'],
    bundles: { },
    mainConfigFile: 'main.js',
};

gulp.task('build', function () {
    requirejs.optimize(requireJsOptimizerConfig);
});

and the main.js file looks like this:

requirejs.config({
    paths: {
        'text': '../lib/require/text',
        'durandal':'../lib/durandal/js',
        'plugins' : '../lib/durandal/js/plugins',
        'transitions' : '../lib/durandal/js/transitions',
        'knockout': '../lib/knockout/knockout-3.4.0',
        'bootstrap': '../lib/bootstrap/js/bootstrap',
        'jquery': '../lib/jquery/jquery-1.9.1'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery'],
            exports: 'jQuery'
       }
    }
});

define([...], function(){ ... });

Although gulp ran without any error, when I went to the site, there is one strange HTTP request:

http://localhost:8080/Scripts/durandal/plugins/widget.js?v=1.0.0.0

I'm guessing that the plugins inside the folder durandal/js/plugins is not compiled correctly. How can I solve this?

I tried specify the widget library explicitly but it still looking for the Scripts folder:

paths: {
    requireLib: '../scripts/require',
    'widget': '../Scripts/durandal/plugins/widget',
},
include: [
    "requireLib",
    'widget',
],

I also don't understand how durandal can run in the first place. Because, as far as I know, you have to define each individual modules, so how can this config work:

paths: {
    plugins' : '../lib/durandal/js/plugins'
}

score 0 · Accepted Answer · answered Mar 13 '19 at 12:15

I found the solution. The first thing is that requirejs and rjs are 2 different things.

requirejs support bundles, but rjs, the tool that do the building/optimization, doesn't have this option.

So we have to build every bundles manually. And than, through the bundles option, tell requirejs about all those bundles, what inside them, by adding this code:

require.config({
    bundles: {
        bundle1: ['file1', 'file2'],
        ...
    }
});

When a file is needed, requirejs will look into this "map" and load the bundle that contains that file, if it is not already loaded.

I've modified the original gulp-durandal base on SteveSanderson's work: durandal-bundler.js; gulpfile.js

SteveSanderson's presentation:

http://vimeo.com/97519516

https://github.com/SteveSanderson/generator-ko

How to build durandal app using requirejs?

1 Answers1