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

我想将两个需要amd模块组合成一个combined.js javascript文件，使用Webpack。Webpack - 将两个匿名模块组合成一个combined.js文件

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维基和其他来源，是一个很好的做法，他们明确建议不要设置名称每个模块，而是把它匿名没有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 - 输出 - combined.js

https://pastebin.com/Dy9ZcgAc

试图加载combined.js文件和模块与RequireJS

[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 ._定义

附加信息

如果我建立与模块在每个模块的define（'name'，..）中有一个'id name'，它可以完美地工作，我可以完美地加载它们，但是正如上面所解释的，它不是一个很好的命名模块的方法。

问题

我怎么能在一个组合结合这些匿名模块。js文件，用requireJS加载该文件，然后获取每个模块？
代码中可能有问题吗？
我查看了requireJS变量：window.requirejs.s.contexts ._。定义了查找所有模块，但第二个模块从未添加到那里。所以我想这可能是我使用的UMD模式或Webpack不支持的功能的问题。

我越来越绝望地试图解决它，并已通过许多资源查找，但无法找到明确的答案。 非常感谢

来源

2017-05-14 xtrm

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

一旦的WebPack combined.js文件被称为与RequireJS，它将执行线返回其自己的主入口点：

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

我们有位置的阵列[0] =模块1;位置[1] =模块2，位置[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** 
      // 
     } 
);

要尝试添加对它的支持并更新此帖子后，我得到它的工作。

来源

2017-05-14 19:09:16 xtrm

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

回答

相关问题