Search code examples
requirejsrequiregruntjsuglifyjsuglifyjs2

How to exclude certain requireJS files from uglifying/optimizing


I have a working requirejs project that is using grunt for building and deployment. If using no optimization at all, the build is working without problems and I get one big js file to deploy it on production.

The problem I have is, that I have some external frameworks (like angularJS) where I already have a minimized/optimized version of it and don't want to optimize it again.

Currently without optimization I include the minified version of this framework via a seperate path config in my gruntfile. Whereas in my normal main.js I have the non-minified version for development.

Now I want to use the optimizer to optimize my own code, but to NOT optimize the external frameworks. But the external frameworks should be included in the resulting big javascript file. Basically I want to tell the optimizer that he should use the original file in some cases.

Can I do it something like this?

I only have found a global exclude option, so that some modules are not included in the resulting optimized js at all.

This is my grunt configuration:

requirejs: {
            compile: {
                options: {
                    baseUrl: "<%= pkg.folders.jsSource %>",
                    name: "../external-libs/almond-0.1.1",
                    include: "main",
                    mainConfigFile: "<%= pkg.folders.jsSource %>/main.js",
                    out: "<%= pkg.folders.build + pkg.name + '-' + pkg.version %>/js/main.js",
                    //logLevel: 0,
                    optimize: "uglify2",
                    //optimize: "none",
                    paths: {
                        'angular':'../external-libs/min/angular-1.0.4',
                        'jquery':'../external-libs/min/jquery-1.7.2',
                        'jquery.mobile':'../external-libs/min/jquery.mobile-1.2.0',
                        'adapter': '../external-libs/min/jquery-mobile-angular-adapter-1.2.0',
                        'moment': '../external-libs/moment-1.6.2.min',
                        'iscroll': '../external-libs/min/iscroll-4.2.5',
                        'iscrollview': '../external-libs/min/jquery.mobile.iscrollview-1.2.6',
                        'add2Home': '../external-libs/min/add2home',
                        'config/config': "config/<%=configDatei%>"
                    }
                }
            }
        },

And this is the relevant part of the main.js:

require.config({
        paths:{
            'angular':'../external-libs/angular-1.0.4',
            'jquery':'../external-libs/jquery-1.7.2',
            'jquery.mobile':'../external-libs/jquery.mobile-1.2.0',
            'adapter': '../external-libs/jquery-mobile-angular-adapter-1.2.0',
            'moment': '../external-libs/moment-1.6.2.min',
            'iscroll': '../external-libs/iscroll-4.2.5',
            'iscrollview': '../external-libs/jquery.mobile.iscrollview-1.2.6',
            'add2Home': '../external-libs/add2home'
        },
        shim:{
            'angular':{ deps:['jquery'], exports:'angular' },
            'iscroll':{ deps:['jquery'], exports:'iscroll' },
            'iscrollview':{ deps:['jquery.mobile', 'iscroll'], exports:'iscrollview' }
        }
    });

Thanks for any help.


Solution

  • Just some suggestions use empty: to indicate NOT to include the module in the optimization.

    In require.config will then indicate the usage of the min file.

    requirejs: {
                compile: {
                    options: {
                        {{ all other settings }}
                        paths: {
                            'angular':'empty:',
                        }
                    }
                }
            },
    
       require.config:{  
                  paths:{
                  'angular':'../external-libs/min/angular-1.0.4',
            },
       }
    

    Please note, that's "empty:" with a colon at the end, not "empty". If you omit the colon, you'll get an error like this:

    "No such file or directory [...]/empty.js" 
    

    Hope this helps.