define("module1",function(require) {
 'use strict';
 console.log("cccc")
});
define("module2",function(require) {
 'use strict';
 console.log("aaaa")
 if(false){
  console.log(require("module1"))
 }
 console.log("bbbb")
});

require(["module2"])

define("module1",function(require) {
 'use strict';
 console.log("cccc")
});
define("module2",[module1],function(module1) {
 'use strict';
 console.log("aaaa")
 if(false){
  console.log(require("module1"))
 }
 console.log("bbbb")
});

cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,

defined[id] = exports;

function callGetModule(args) {
 //Skip modules already defined.
 if (!hasProp(defined, args[0])) {
  getModule(makeModuleMap(args[0], null, true)).init(args[1], args[2]);
 }
}

req.createNode = function (config, moduleName, url) {
 var node = config.xhtml "external nofollow" href="https://webpack.js.org/guides/author-libraries/#expose-the-library">来自webpack的凝视：




output: {
 path: path.join(__dirname),
 filename: 'index.js',
 libraryTarget: "umd",//此处是希望打包的插件类型
 library: "Swiper",
}




看一眼打包后的效果：


!function(root,callback){
"object"==typeof exports&&"object"==typeof module"react"),require("prop-types"))
 :
 "function"==typeof define&&define.amd"Swiper",["react","prop-types"],callback)
  :"object"==typeof exports"react"),require("prop-types"))
   :
   root.Swiper=callback(root.React,root.PropTypes)//全局变量
}(window,callback)




这样一个polyfill，瞬间就兼容了CommonJS，AMD和全局的一个模块。这就是UMD，比起规范，不如说它是一个兼容，polyfill，支持多个模块规范。
where is CMD？
眼尖的小伙伴应该发现了，CMD不知去向，webpack的打包中也没有CMD模块的一个选项。CMD其实就是按照CommonJS规范，然后进行改造，从而使之支持浏览器端的一种规范。
主要说说他和AMD的主要区别吧：
require关键字引入内容的执行顺序。AMD是一个依赖提前加载的概念，而CMD是同步执行，遇到require之后再执行当前的一个模块。


define("c",function(require, exports, module) {
 console.log("bbb")
});
define("b",function(require, exports, module) {
 console.log("aaa")
 require("c")
 console.log("ccc")
});
seajs.use("b")




这样打印的就是 aaa，bbb，ccc。按照代码出现的顺序执行。
当然这个是同步代码的区别，至于异步代码，CMD和AMD都是通过script，append到head加载，存入模块对象之中，然后根据id调用。不过CMD有一点不同，加了一个小小的优化：


if (!data.debug) {
 head.removeChild(node)
}


当代码加载完毕之后，并且缓存在模块之中之后，便在head之中删除了这个script。
后记
借用鲁迅的一句话“世上本没有路，走的人多了也就成了路”。JS MODUDLE的规范也是如此，用的人多了也就是默认的解决方案了。
JS MODULE大战就写到这边吧，大家都不晓得这些模块的规范能够存活多久，但是概念都很好。所以好好学习概念，以后就算有新的规范出来了，和老规范一对比，找出不同点，加以分析，便能够轻松上手！
参考地址
不能忘记帮助笔者认知模块的文章们，谢谢大佬们：
requirejs：requirejs的官网对于AMD产生历史的解释。

前端模块化开发那点历史 ：seajs的大佬对模块这一块的看法，梳理了笔者对于AMD的困惑

overflow上对于AMD和requirejs的一个解释
以上所述是小编给大家介绍的js module详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！