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文件

回答

相關問題