Why bother with javascript preprocessors you say?

Javascript is a dynamic language that offers many features to create rich online applications and is now used as a key language in heavy ajax based online applications.
Although enhanced by profiling, debugging tools like Firebug for Firefox, javascript developing in itself still miss features offered since a long time by other static languages.One of this feature being a preprocessor syntax that could ease development.

A preprocessor will allow you to add extra code (like debug statements, conditional flow) that will be stripped down before going live. Some will also give you the opportunity to compress/obfuscate the final output or even merge multiple files into one or why not create different built for different environment (why should you have IE related branching code that might increase file size, slow down the UI experience when you are developing solely for an iphone/ipad version of a website?).

So that you can grab the concept of a preprocessor for those of you who did not use any, here is a short example:

/*@define VERSION 1.1 */

/*@require Base.js,Math.js */

/*@ifdef DEBUG */
console.log("debug mode. Version:"+/*@=VERSION */);
/*@end */

function sum(num1,num2) {

/*@ifdef STRICT_MODE */
        if(num1===undefined || num2===undefined){
              throw new Error("the function requires 2 parameters");
       }
/*@end */

/*@ifdef DEBUG */
      console.log(num1+num2);
/*@end */

      return num1+num2;
}
This may sound rather hard to read but you will be able to create different builts.

The "require" directive will merge the two files listed into this one.
When you call the preprocessor of your choice on the command line let's say, just give it some options:

jspreprocessor -vars DEBUG -output merged.js -compression mini

You will get a merged.js file containing the following output:

//..contents of the js files required goes here
console.log("debug mode. Version:"+1.1);
function sum(num1,num2) {
     console.log(num1+num2);
     return num1+num2;
}

but compressed on top of that!!

The preprocessor stripped down the javascript to minimize overhead and unnecessary code lines (lightweight javascript file).

Do you see how a preprocessor could come in handy??


Hopefully, below is a list of preprocessors that exist and could help you in your future development if you do not already use them.

Javascript Preprocessor

language:javascript

http://www.bramstein.com/projects/preprocess/

A preprocessor combine with Apache Ant or Rhino Javascript Engine or simply call from within javascript!

jscompiler

language:none (online)

http://jscompiler.org/usage.php 

an online preprocessor using java like annotations.

JS Built Tools

language:Java/xml (Ant suit)

http://code.google.com/p/js-build-tools/

a collection of Ant tasks that contains a preprocessor, a compressor (YUI) and a doc generation based on MoxieDoc.

Jsmacro

language:python

http://github.com/smartt/jsmacro

a preprocessor following a syntax closed to C.

Sprocket

language:ruby

http://github.com/sstephenson/sprockets

a preprocessor written in ruby mainly intended to join multiple files into one through "require" and "provide" directives. work well with Pdoc.

Juicer

language:ruby

http://github.com/cjohansen/juicer

Focus on combining js and css files, compressing them with different tools.

Js preprocessor

language:ruby

http://js-preprocessor.com/

Focus on combining js and css files, compressing them with different tools.

-----
I certainly forgot some preprocessor out there but don't hesitate to comment about them and give feedback on the one listed above if you use them!