0

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

模块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

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

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 加载 combine.js 文件和模块

[索引.html]

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

问题

加载 combine.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 不支持的功能。

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

4

1 回答 1

0

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

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

/******/    // 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);"then objectTest1 将被返回，我们将其设置为 "module.exports = __webpack_require__(1);"then 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**
           //
        }
);

将尝试为其添加支持并在我开始工作后更新此帖子。

于 2017-05-14T19:09:16.837 回答