3

我正在尝试使用RequireJS 优化器将两个 require amd 模块组合成一个 combine.js javascript 文件。

**此问题与此问题不同：Mismatched anonymous define() module where there is not a solution or detail of the questions,并且与reactJS文档有一些矛盾的建议。

模块1.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;
        }
}));

模块2.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 -图书馆#anon

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

RequireJS 优化器 - 将模块组合在一个 js 文件中

[构建.js]

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

[定义.js]

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

[弹出 requireJS 优化器]

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

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

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

[索引.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 名称。问题可能就在这里。

问题

  1. 如何将这些匿名模块组合到一个 combine.js 文件中，使用 requireJS 加载该文件，然后获取模块？
  2. 代码中可能有问题吗？
  3. 在 requireJS Optimizer 文档中，他们说他们支持加载匿名模块，但我一直无法做到。是否真的可以在不为模块分配 id 名称的情况下做到这一点？

我完全绝望地试图解决它，并且已经查看了许多资源，但找不到明确的答案。非常感谢

4

0 回答 0