Compile-time constants with TypeScript and UglifyJS

0-DEBUG-constant-in-TypeScript-with-Uglify.md

DEBUG constant in TypeScript with UglifyJS

One of the requested features in TypeScript is support for the kind of compilation constants that C#, for example, provides, where you can say

#if(DEBUG)
  MessageBox.Show(...);
#endif

TypeScript doesn't support this directly, but the JavaScript minifier UglifyJS does. Here I've posted some sample code and the Gruntfile used to build it, along with the output for the two Uglify builds, one with the DEBUG constant set to true, and the other to false. Where it is set to true, the if statement is removed but its body is kept. Where it is set to false, the if statement and its body are completely removed.

There are also some sourcemap shenanigans in the sample code because I didn't remove them from the project I copied the Gruntfile from. They're irrelevant to this specific example, but show how Uglify can take an input sourcemap (i.e. the one generated by TypeScript) and use it to make its output sourcemap point to the .ts files, which is pretty neat. It means you can do your dev testing and debugging using the minified code (recommended to avoid minification-related errors) and still be stepping through your TypeScript code (as long as you're using Chrome Dev Tools with Source Map support switched on, but of course you are.)

1-app.ts

declare var DEBUG: boolean;

document.addEventListener("DOMContentLoaded", () => {
  if(DEBUG) { // Will be elided by both Uglify builds
    alert("Hello"); // Will be kept by the 'debug' Uglify build
  }
  document.getElementById("header").innerHTML = "Hello";
});

2-Gruntfile.js

module.exports = function (grunt) {
    'use strict';

    grunt.initConfig({
        typescript: {
            app: {
                dest: 'build/app.js',
                src: ['app.ts'],
                options: {
                    target: 'ES5',
                    comments: true,
                    sourcemap: true
                }
            }
        },

        uglify: {
            app: {
                options: {
                    sourceMap: true,
                    sourceMapIn: 'build/app.js.map',
                    compress: {
                        global_defs: {
                            "DEBUG": false
                        }
                    }
                },
                files: {
                    'js/app.min.js': ['build/app.js']
                }
            },
            debug: {
                options: {
                    sourceMap: true,
                    sourceMapIn: 'build/app.js.map',
                    compress: {
                        global_defs: {
                            "DEBUG": true
                        }
                    }
                },
                files: {
                    'js/debug.min.js': ['build/app.js']
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-typescript');
    grunt.registerTask('default', ['typescript', 'uglify']);
};

3-app.min.js

document.addEventListener("DOMContentLoaded",function(){document.getElementById("header").innerHTML="Hello"});
//# sourceMappingURL=app.min.map

4-debug.min.js

document.addEventListener("DOMContentLoaded",function(){alert("Hello"),document.getElementById("header").innerHTML="Hello"});
//# sourceMappingURL=debug.min.map