Typescript import module to import minify version of js

Question

When using Typescript (v0.8.3), with Visual Studio + Web Essentials, I have configure Web Essentials to use the AMD module compiler flag, and also have it to minify the generated JS.

In my AppMain.ts I imported a module using the import keyword

/// <reference path="./../modules/jquery.d.ts" />
import main = module('classes/facebook');

export class AppMain {
    public run() {
        $(()=>{
            var app = new facebook.App();
            app.start();
        });
    }
}

And the generated JS looks like the following

define(["require", "exports", 'classes/facebook'], function(require, exports, __main__) {
    var main = __main__;

    var AppMain = (function () {
        function AppMain() { }
        AppMain.prototype.run = function () {
            $(function () {
                var app = new facebook.App();
                app.start();
            });
        };
        return AppMain;
    })();
    exports.AppMain = AppMain;    
})

My question is, how do I get the generated requirejs code to load the *.min instead? Since Web Essentials already generated the minify version of the JS file.

E.g. What of what I want from the generated JS file:

define(["require", "exports", 'classes/facebook.min'], function(require, exports, __main__)

Edit: I've lots of modules, so I'd prefer a way that gives me less headache.

Answer 1

I'd recommend that you do not use these min files and use r.js for merging followed by a separate minification pipeline when you are using RequireJS to begin with.

It will save you headaches with debugging your app as well since you can easily debug the non minified js.

Answer 2

You need to add some RequireJS config to ask it to substitute the minified version of the library:

requirejs.config({
    enforceDefine: true,
    paths: {
        facebook: [
            'lib/facebook.min',
            'lib/facebook'
        ]
    }
});