Use AMD/UMD wrapper on JS libraries

[tejacques]

This will allow users to use a module loader or bundler like requirejs, commonjs, browserify or webpack

Using this syntax:

; (function (define) {
define(function(require,exports,module){
    'use strict';
   // Implementation

/*!
 * UMD/AMD/Global context Module Loader wrapper
 * based off https://gist.github.com/wilsonpage/8598603
 *
 * This wrapper will try to use a module loader with the
 * following priority:
 *
 *  1.) AMD
 *  2.) CommonJS
 *  3.) Context Variable (window in the browser)
 */
});})(typeof define == 'function' && define.amd ? define
    : (function (name, context) {
        'use strict';
        return typeof module == 'object' ? function (define) {
            define(require, exports, module);
        }
        : function (define) {
            var module = {
                exports: {}
            };
            var require = function (n) {
                return context[n];
            };

            define(require, module.exports, module);
            context[name] = module.exports;
        };
    })(name, this));

[tejacques]

There's an additional layer of trickiness here -- callr.angular requires callr, which requires signalR, which requires jQuery. Because SignalR isn't written with a UMD/AMD wrapper it mucks up the chain to try and actually use require for anything, which breaks a lot of the beauty of using it.

There are three possible routes:

1. Don't use UMD/AMD wrapper, and tell library users to deal with it
2. Use UMD/AMD wrapper but don't actually specify jquery dependencies with require
3. Use UMD/AMD wrapper, specify dependency on jquery with require, but not signalR, and tell library users to deal with it

In the (presumably) most common case: users are not using a module loader at all. In those cases all three methods will work the same.

In the case where users are using a module loader to either build bundles or require files they will have to mess with it in all three cases. Currently on the fence about which direction to go.

[HNeukermans]

I found a solution for webpack module loader: expose-loader !!

the jquery.signalr.js script can be used in webpack loaded env. The solution is to use the expose loader, when loading in the jquery module!
inside your vendor.ts

import 'expose?jQuery!jquery';
import '../node_modules/signalr/jquery.signalR.js';

The jquery.signalR.js script is indeed not written as a umd module. Which makes it by default, not to be loadable by webpack. It doesn't require jquery, but assumes that Jquery lives on the global variable window.jQuery.
We can make this work in webpack by importing the jquery module with the expose-loader. This loader will make sure that the exported value of jquery, is exposed to the jQuery global var. Thus allowing to load the signalr.js script as the next module.

Also if you want to later use signalr by using $, you also will have to use the provideplugin for the jquery module.
inside webpack.config.js
new ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' })