requireJS optimizer - combining two anonymous modules into one combined.js file

457 Views Asked by At

I am trying to combine two require amd modules into one combined.js javascript file using RequireJS optimizer.

**This question is not the same than this one: Mismatched anonymous define() module where there is not a solution or detailed explanation of the issues, and there are some contradictory advises with the reactJS documentation.

module1.js

//module1.js - objectTest1
(function (root, factory) {
    'use strict';

    //Universal Module Definition
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.returnExports = factory();
    }
}(this, function () {
    'use strict';

     return function objectTest1() {
          var test = '1';
          return test;
        }
}));

module2.js

//module2.js - objectTest2
(function (root, factory) {
    'use strict';

    //Universal Module Definition
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.returnExports = factory();
    }
}(this, function () {
    'use strict';

     return function objectTest2() {
          var test = '2';
          return test;
        }
}));

Recommended good practice

In requireJS wiki and other sources, as a good practice, they explicitly recommend not to set a name for each module, but instead leave it anonymous without an id: https://github.com/requirejs/requirejs/wiki/Updating-existing-libraries#anon

"Normally you should not register a named module, but instead register as an anonymous module..."

RequireJS optimizer - Combining the modules in one js file

[build.js]

({
    baseUrl: ".",
    paths: {
        "module1": "module1.js",
        "module2":"module2.js"
    },
    name: "definition",
    out: "combined.js"
})

[definition.js]

require(["module1", "module2"], function (objectTest1, objectTest2) {
});

[Ejecute requireJS optimizer]

./node_modules/requirejs/bin/r.js -o build.js optimize=none

RequireJS optimizer - Output - combined.js

(function (root, factory) {
    'use strict';

    //Universal Module Definition
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.returnExports = factory();
    }
}(this, function () {
    'use strict';

    return function objectTest1() {
        var test = '1';
        return test;
    }
}));
define("module1", function(){});

(function (root, factory) {
    'use strict';

    //Universal Module Definition
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.returnExports = factory();
    }
}(this, function () {
    'use strict';

    return function objectTest2() {
        var test = '2';
        return test;
    }
}));
define("module2", function(){});

require(["module1", "module2"], function (objectTest1, objectTest2) {
});
define("combined_name", function(){});

Trying to load combined.js file and modules

[index.html]

require(["combined_name"], 
        function (combined_name, objectTest1, objectTest2) {
           //combined_name = undefined
           //one of the objects is found, the other is undefined (error)
        }
);

Problem

When loading the combined.js file, I am getting always the same error unless I specify an id name for each one of the modules above with the code: define('module1', factory); ...

Error:

Uncaught Error: Mismatched anonymous define() module: function () {
    'use strict';

    return function objectTest1() {

Additional information

  • All files are currently loading perfectly with requireJS with that UMD pattern. However I do not know if something should be changed.
  • The definition.js and combined.js are explicitly loading modules with a defined id name for each module. The problem may be here.

Questions

  1. How can I combine those anonymous modules in one combined.js file, load that file with requireJS and then get the modules?
  2. Could it be something wrong in the code?
  3. In the requireJS Optimizer documentation, they say they support loading anonymous modules, but I have not been able to do it. Is it really possible to do it without assigning a id name to the modules?

I am getting totally desesperate trying to solve it and already looked through many resources but could not find a clear answer. Thanks a lot

0

There are 0 best solutions below