Search code examples
javascriptrequirejsdurandalalmond

Optimizing Durandal's build process


The HTML starter kit pro for Durandal contains the following grunt task for optimizing a build:

durandal: {
    main: {
        src: ['app/**/*.*', 'lib/durandal/**/*.js'],
        options: {
            name: '../lib/require/almond-custom',
            baseUrl: requireConfig.baseUrl,
            mainPath: 'app/main',
            paths: mixIn({}, requireConfig.paths, { 
                'almond': '../lib/require/almond-custom.js' 
            }),
            exclude: [],
            optimize: 'none',
            out: 'build/app/main.js'
        }
    }
}

I have some concerns about it which I need your help sorting out:

  1. Script file redundancy. The build process keeps the lib folder with scripts like jQuery, bootstrap etc. Why? If you look at the built build/app/main.js is has added all those scripts. Which leads me to the following question:

  2. If I remove the lib folder, everything works, except for the fact that I get a require is not defined in the console. The code still looks for lib/require/require.js which can be solved by simply adding it there. However, isn't this what almond is all about? It's included in the built build/app/main.js file. As far as I knew, Almond is a light weight replacement for require to be used in optimized files.

To reproduce the issues you can simply run the "Quick start" provided in the link at the top.


Solution

  • Yes, You are right that main.js includes everything needed to run the app. The reason You are getting require is not defined is because, if you closely look at the index.html file you will see that the index.html refers looks for the file in /lib/require folder and loads our main.js file through it. there is another line right below that in index.html which is commented, you can just uncomment that and it should just work even if you remove lib directory.

    The only errros that you will get by removing the /lib directory after uncommenting <script src="app/main.js"></script> line and commenting <script src="lib/require/require.js" data-main="app/main"></script>.

    Hope it helps.