requireJS优化器 - 将两个匿名模块组合成一个combined.js文件

时间:2017-05-11 19:37:06

标签: javascript requirejs requirejs-optimizer umd

我正在尝试使用 RequireJS优化器将两个需要的amd模块合并到一个combined.js javascript文件中。

**这个问题与这个问题不同:Mismatched anonymous define() module没有解决方案或问题的详细解释,而且对reactJS文档也提出了一些相互矛盾的建议。

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;
        }
}));

推荐的良好做法

在requireJS wiki和其他来源中,作为一种好的做法,他们明确建议不要为每个模块设置一个名称,而是在没有id的情况下保持匿名: https://github.com/requirejs/requirejs/wiki/Updating-existing-libraries#anon

通常你不应该注册一个命名模块,而是注册为匿名模块...

RequireJS优化器 - 将模块合并到一个js文件中

[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优化器 - 输出 - 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(){});

尝试加载combined.js文件和模块

[index.html的]

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

问题

当加载combined.js文件时,我总是得到相同的错误,除非我为上面的每个模块指定一个id名称,代码为:define('module1',factory); ...

错误:

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

    return function objectTest1() {

其他信息

  • 目前所有文件都与使用该UMD模式的requireJS完美匹配。但是我不知道是否应该改变一些事情。
  • definition.js和combined.js显式加载模块,每个模块都定义了 id name 。问题可能在这里。

问题

  1. 如何将这些匿名模块合并到一个combined.js文件中,使用requireJS加载该文件然后获取模块?
  2. 代码可能有问题吗?
  3. 在requireJS Optimizer文档中,他们说他们支持加载匿名模块,但我无法做到。是否真的可以在不为模块分配ID名称的情况下进行此操作?
  4. 我正在试图解决它并且已经查看了许多资源,但是找不到明确的答案。 非常感谢

0 个答案:

没有答案