UMD syntax with fallback global

Question

My Setup

I'm compiling my .ts module 'FooModule' into an UMD module in Visual Studio 2015. I would like to extend this UMD syntax, so that the module will be injected into the global object as fallback when no module loading system is present, and I would like to automate this task as part of the build-process.

---

The UMD Syntax

When compiling a TypeScript module with the UMD syntax (Universal Module Definition syntax), modules that are compatible with both RequireJS and NodeJS are emitted:

foo-module.ts

export class Foo {
    // ...
}

... is compiled into:

foo-module.js

(function (factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        var v = factory(require, exports); if (v !== undefined) module.exports = v;
    } else if (typeof define === 'function' && define.amd) {
        define(["require", "exports"], factory);
    }
})(function (require, exports) {
    "use strict";
    var Foo = (function () {
        function Foo() {
        }
        return Foo;
    }());
    exports.Foo = Foo;
});

---

Fallback to Global Inject

However, as part of the Universal part of UMD, I would like my module to be usable without any module loading system as well. My module has no dependencies.

This is usually done by adding a third case as a fallback for when neither the RequireJS nor the NodeJS module system are present, which will effectively inject into the global object. For foo-module, this would look like:

(function (global, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        var v = factory(require, exports); if (v !== undefined) module.exports = v;
    } else if (typeof define === 'function' && define.amd) {
        define(["require", "exports"], factory);
    } else {
        // *****************************
        factory(null, global.FooModule || (global.FooModule = {})); // <- This part.
        // *****************************
    }
})(this, function (require, exports) {
    "use strict";
    var Foo = (function () {
        function Foo() {
        }
        return Foo;
    }());

    // In browsers, this means 'window.FooModule.Foo = Foo'.
    exports.Foo = Foo;
});

I believe this would suffice in all cases when there are no external dependencies (assuming no two modules with the same name have been loaded this way).

I understand I can just rewrite manually after each build, but how could I automate this task (or something with identical results) as part of a build-process in Visual Studio (2015)?

Answer 1

I understand I can just rewrite manually after each build, but how could I automate this task (or something with identical results) as part of a build-process in Visual Studio (2015)?

You will have to create this yourself.

More

There are a few variations of UMD : https://github.com/umdjs/umd the one you want is fallback browser global : https://github.com/umdjs/umd/blob/master/templates/returnExports.js

This is not the version in TypeScript because global is pretty much no module system.