Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 841
Marco Rinck Avatar asked May 13 '13 12:05

Marco Rinck


People also ask

What is RequireJS config?

Advertisements. RequireJS can be initialized by passing the main configuration in the HTML template through the data-main attribute. It is used by RequireJS to know which module to load in your application. For instance − <script data-main = "scripts/main" src = "scripts/require.js"></script>

What is the main purpose of the RequireJS framework?

RequireJS is a JavaScript file and module loader. It improves perceived page load times because it allows JavaScript to load in the background. In particular, it enables asynchronous JavaScript loading.

Should I use RequireJS?

Generally you only use RequireJS in its loading form during development. Once the site is done and ready for deployment, you minify the code. The advantage here is RequireJS knows exactly what your dependencies are, and thus can easily minify the code in the correct order.


2 Answers

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.

like image 95
Ian Lim Avatar answered Sep 19 '22 08:09

Ian Lim


I was having the same issue of the external libraries always being re-minified as the comments to the answer, and this is the method that I use to get around that. I have a two tasks, one for my code and one for the external libraries. It is really just copying files -- so just a copy task would work as well. I do also use the "empty:" keywork for the external libraries so that are not included in the minifications of my code.

requirejs: {     options: {         mainConfigFile: '...',         fileExclusionRegExp '...common things to exclude...'     },     main: {         options: {             baseUrl: '.../js',             dir: '.../js-built',             fileExclusionRegExp: /^external$/,             ... etc ...         }     },     external: {         options: {             baseUrl: '.../js/external',             dir: '.../js-built/external',             optimize: 'none'         }     } } 
like image 23
Matt Holcomb Avatar answered Sep 18 '22 08:09

Matt Holcomb