Question

According to "Reference bundles on requirejs" the solution to the problem of getting requirejs to reference modules delivered in a bundle is to name them with a name exactly matching the filename so that with optimisations turned off they resolve from the filesystem and with optimisations turned on they resolve from the bundle.

This is the start of knockout-jqueryui

/*! knockout-jqueryui - v1.0.0 - 3/21/2014
* https://github.com/gvas/knockout-jqueryui
* Copyright (c) 2014 Vas Gabor <gvas.munka@gmail.com>; Licensed MIT */
/*global require, define, exports*/
/*jslint browser:true, maxlen:256*/
(function (root, factory) {
    'use strict';

    if (typeof exports === 'object') {
        // CommonJS
        factory(exports, require('jquery'), require('knockout'), require('jquery-ui'));
    } else if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'jquery', 'knockout', 'jquery-ui'], factory);
    } else {
        // Browser globals
        factory((root.kojqui = {}), root.jQuery, root.ko);
    }
} (this, function (exports, $, ko) {
    'use strict';

As you can see it's anonymous. I have two conspicuous options:

  1. Edit the file and give it a name matching the file.

  2. Somehow wrap it so as to name it.

Option one is straightforward:

if (typeof exports === 'object') {
    // CommonJS
    factory(exports, require('jquery'), require('knockout'), require('jquery-ui'));
} else if (typeof define === 'function' && define.amd) {
    // AMD. Register as a module named 'knockout-jqueryui'.
    define('knockout-jqueryui',
           ['exports', 'jquery', 'knockout', 'jquery-ui'], factory);
} else {
    // Browser globals
    factory((root.kojqui = {}), root.jQuery, root.ko);
}

But it doesn't seem like a great idea. I'm pretty new to AMD so if anyone can advise me on a good way to implement an option two wrapper, that would be excellent.

Was it helpful?

Solution

I am pleased to report that I have found a nice clean solution.

Bundling causes knockout-jqueryui.js to be loaded directly by a script tag. As a result it uses the third factory option in the code extract shown in the question, producing a global kojqui.

This global is in scope for main.js and can be captured:

requirejs.config({
  paths: {
    'text': '../Scripts/text',
    'durandal': '../Scripts/durandal',
    'plugins': '../Scripts/durandal/plugins',
    'transitions': '../Scripts/durandal/transitions'
  }
});

define('jquery', function () { return jQuery; });
define('knockout', ko);
define('moment', function () { return moment; });
define('knockout-jqueryui', kojqui);

No change is required in knockout-jqueryui.js and I have verified that this works both with optimisations enabled and with optimisations off for debugging.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top