esm,cjs,umd,amd,cmd当你非要理解时

62 阅读1分钟

每次都有这样的问题,但是记忆力又不允许了,所以一定要一次性搞搞清楚,免得到时候还在忘记 首先,这四个是**模块规范,**cmd,conmonjs,esm,amd, (umd是一种解决方案)

CMD

cmd是最早的,用require,基本给node用的,**但是,**这种模块引入方式导致导入顺序不受控,模块依赖关系无法管理

CJS

也使用require,解决了cmd的一些缺陷,如模块导入顺序,依赖关系管理等,因为是同步,也只能用于node

amd

requirejs库来进行导入,主要也是为了解决上面两个的缺陷:导入顺序,依赖关系管理,模块缓存。可以异步****,可用于浏览器,异步是最重要的了

esm

是最新规范,解决上面三个的bug,有所有功能,使用import了

umd方案

通用写法,通用模块加载规范(本身并不是规范,只是多重规范的集合),是amd和cjs两个流行而不同意的情况下,催生出来的 模块导出:

(function (root, factory) {  
    if (typeof define === 'function' && define.amd) {  
        // AMD  
        define(['dependency'], factory);  
    } else if (typeof exports === 'object') {  
        // Node, CommonJS-like  
        module.exports = factory(require('dependency'));  
    } else {  
        // Browser globals (root is window)  
        root.returnExports = factory(root.dependency);  
    }  
}(this, function (dependency) {  
    // The actual module  
    function MyModule() {  
        //...  
    }  
    return MyModule;  
}));


模块导入:

// amd
require(['myModule'], function(myModule) {  
    // 使用myModule  
});
// cjs
var myModule = require('myModule'); 

导入模块

image.png