Webpack - 将两个匿名模块组合成一个 combine.js 文件

Question

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

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

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

WebPack - 将模块组合到一个 js 文件中

[webpack.config.js]

module.exports= {
    entry: [
        "./modules/module1.js",
        "./modules/module2.js"
    ],
    output: {
        filename:"combined.js",
        libraryTarget: "umd",
        umdNamedDefine: true
    }
};

[Ejecute WebPack 组合]

webpack.js
webpack 2.5.1
Time: 64ms
Asset     Size  Chunks             Chunk Names
combined.js  5.11 kB       0  [emitted]  main
   [0] ./modules/module1.js 551 bytes {0} [built]
   [1] ./modules/module2.js 551 bytes {0} [built]
   [2] multi ./modules/module1.js ./modules/module2.js 40 bytes {0} [built]

WebPack - 输出 - combine.js

https://pastebin.com/Dy9ZcgAc

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

[index.html]

require(["combined", "combined/modules/module1", "combined/modules/module2"], 
        function (combined, objectTest1, objectTest2) {
           //combined = objectTest1
           //
           //objectTest1 = objectTest1 - OK!
           //
           //objectTest2 = objectTest1 - **WRONG**
           //
        }
);

问题

加载combined.js 文件时，我总是得到组合文件中定义的第一个匿名模块。而且我不知道如何获取第二个模块，它从未在 requireJS 变量中设置：window.requirejs.s.contexts._.defined

其他信息

如果我在每个模块的define('name',..) 中使用'id name' 构建模块，它可以完美运行，并且我可以完美加载它们，但如上所述，这不是一个好习惯命名您的模块。

问题

1. 如何将这些匿名模块合并到一个 combine.js 文件中，使用 requireJS 加载该文件，然后获取每个模块？
2. 会不会是代码有问题？
3. 我查看了 requireJS 变量：window.requirejs.s.contexts._.defined 以查找所有模块，但第二个模块从未添加到那里。所以我想这可能是我正在使用的 UMD 模式的问题，或者是 Webpack 不支持的功能。

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

Answer 1

我想我找到了它不起作用的原因。

一旦 webpack combine.js 文件被 RequireJS 调用，它将执行该行以返回它自己的主入口点：

/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 2);

我们有一个 position[0]=module1; 的数组位置[1]=module2，位置[2]=webpack_entry_point。如果我们查看这些行，它将执行我们可以在文件末尾看到的 webpack_entry_point 代码：

/***/ }),
/* 2 */
    /***/ (function(module, exports, __webpack_require__) {
    __webpack_require__(0);
    module.exports = __webpack_require__(1);
/***/ })

最后一行："module.exports = __webpack_require__(1);" 很重要，因为它说明了要返回的模块对象。 如果我们将其设置为"module.exports = __webpack_require__(0);"，那么 objectTest1 将被返回，我们将其设置为 "module.exports = __webpack_require__(1);"，然后 objectTest2 将被返回，因为 module.exports 不能返回 2 个不同的东西并且会被覆盖。

保持与匿名模块的兼容性的解决方案是在构造函数中将标识字符串传递给 webpack，以便能够处理要返回的模块，例如上面的示例，目前不支持：

require(["combined", "combined/modules/module1", "combined/modules/module2"], 
        function (combined, objectTest1, objectTest2) {
           //combined = objectTest1
           //
           //objectTest1 = objectTest1 - OK!
           //
           //objectTest2 = objectTest1 - **WRONG**
           //
        }
);

我会尝试添加对它的支持并在我开始工作后更新这篇文章。