一文带你搞懂JS五大模块标准:CommonJS / AMD / CMD / UMD / ESM

// math.js
const add = (a, b) => a + b;
module.exports = { add };

// index.js
const math = require('./math');
console.log(math.add(1, 2));

// 1 通过exports 暴露模块接口：
// study.js
var hello = function () {
   console.log('hello studygd.com.');
}
exports.hello = hello;

//  main.js
const studygd = require('./study');
studygd.hello();

//2、通过module.exports 暴露模块接口：定义math模块

//math.js
module.exports = {
   add: function(left, right) {
       return left + right;
   },
   subtract: function(left, right) {
       return left - right;
   }
}

//使用刚才定义的math模块, 并再定义一个calculator模块
//calculator.js

const math = require('./math.js');
module.exports = {
    add: math.add
}

// 定义模块
define(['jquery', './math'], function ($, math) {
  function render() {
    $('body').text(math.add(1, 3));
  }
  // 导出模块
  return { render };
});

// 入口加载
require(['./main'], function (app) {
  app.render();
});

/// 1.通过define方法定义模块base.js

define(function (){
    var control = {};
    return control;
});


/// control.js
define(['jquery', 'jqmd5', 'cookie', 'base'], function (){
    var control = {};
 
    /**
     * 登录状态检测
     */
    control.cookie = function (){
        setTimeout(WK.LC.syncLoginState, 100);
    };
 
    /**
     * 模块调用及配置
     */
    control.template = function (){
        if($('.naver').length > 0) base.naver();
 
        if(CATEGORY == 'login')
        {
            if(MODEL == 'index'){
                // 登录页
                require(['login'], function (Login){
                    Login.form();
                });
            };
 
            if(MODEL == 'register' || MODEL == 'check'){
                // 注册页
                require(['register'], function (Register){
                    Register.form(MODEL);
                });
            };
        };
 
        if(CATEGORY == 'goods')
        {
            // 详情页
            if(MODEL == 'index'){
                require(['detail'], function (Detail){
                    // Detail.form();
                });
            };
        };
    };
 
    return control;
});


// 2. 通过require方法加载模块（异步加载）; 注意：参数里面有define声明的模块

require(['control'], function (Control){
    Control.cookie();
    Control.template();
});

define(function (require, exports, module) {
  // 就近按需引入依赖
  const math = require('./math');
  exports.log = function () {
    console.log(math.add(2, 4));
  };
});

// 1.通过define方法定义模块calculator.js
define('calculator', function(require, exports) {
    // 通过require方法加载其他模块
    var math = require('math');
    exports.add = function(left, right) { return math.add(left, right) };
    exports.subtract = function(left, right) { return math.subtract(left, right) };
})
//可以看到calculator模块所的依赖的math模块没有在define函数的参数中进行声明, 而是通过require(‘math')来引入的

//2、使用calculator模块

seajs.use(['calculator'], function(calculator) {
    console.log('1 + 1 = ' + calculator.add(1, 1));
    console.log('2 - 2 = ' + calculator.subtract(2, 1));
})

(function (root, factory) {
  // AMD 环境判断
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  }
  // CommonJS / Node 环境判断
  else if (typeof module === 'object' && module.exports) {
    module.exports = factory(require('jquery'));
  }
  // 普通浏览器 script 全局挂载
  else {
    root.myLib = factory(root.jQuery);
  }
})(this, function ($) {
  // 类库核心逻辑
  return {
    sayHi: () => console.log('hello umd lib')
  };
});

(function (root, factory) {
    if (typeof exports === 'object' && typeof module === 'object')
        // commonjs
        module.exports = factory()
    else if (typeof define === 'function' && define.amd)
        // amd、cmd
        define([], factory)
    else if (typeof exports === 'object')
        // commonjs
        exports['math'] = factory()
    else
        // 全局对象, 浏览器中是 window
        root['math'] = factory()
})(this, function() {
    return { add: function(left, right) { return left + right; } }
})

//其实只要你看过jq源码，你就会觉得 上面的这段代码很熟悉，是的，jq源码里面就是采用了umd规范去做兼容，所以jq可以说是umd规范的一种代表
//附：jq源码大体框架

( function( global, factory ) {
 
    "use strict";
 
    if ( typeof module === "object" && typeof module.exports === "object" ) {
 
        // For CommonJS and CommonJS-like environments where a proper `window`
        // is present, execute the factory and get jQuery.
        // For environments that do not have a `window` with a `document`
        // (such as Node.js), expose a factory as module.exports.
        // This accentuates the need for the creation of a real `window`.
        // e.g. var jQuery = require("jquery")(window);
        // See ticket #14549 for more info.
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }
 
// Pass this if window is not defined yet
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
 
    //这里编写jquery主体代码...
 
    // AMD
    if ( typeof define === "function" && define.amd ) {
        define( "jquery", [], function() {
            return jQuery;
        } );
    }
 
    var
        // Map over jQuery in case of overwrite
        _jQuery = window.jQuery,
 
        // Map over the $ in case of overwrite
        _$ = window.$;
 
    jQuery.noConflict = function( deep ) {
        if ( window.$ === jQuery ) {
            window.$ = _$;
        }
 
        if ( deep && window.jQuery === jQuery ) {
            window.jQuery = _jQuery;
        }
 
        return jQuery;
    };
 
    if ( !noGlobal ) {
        window.jQuery = window.$ = jQuery;
    }
 
    return jQuery;
} );

// math.js 导出
export const add = (a, b) => a + b;
export const sub = (a, b) => a - b;
// 默认导出
export default { add };

// index.js 导入
import { add, sub } from './math.js';
import math from './math.js';
// 命名空间全部导入
import * as MathUtil from './math.js';
// 动态异步按需导入
import('./math.js').then(mod => console.log(mod.add(1, 2)));

<!-- 必须声明 type="module" -->
<script type="module" src="main.js"></script>

//math.js
export { add: (left, right) => left + right; }

// 在calculator.js导入

import { add } from './math.js';
console.log('1 + 1 = ' + add(1, 1));

// ES6 Module例子
//calculator.js
var count=0;
const ADD=function(a,b){
      count+=1;
      return a+b;
};
export {count,ADD}
 
 
//inde.html
<script type="module">
 import {count,ADD} from './src/calculator.js'; // 导入calculator.js
 console.log(count); // 0
 ADD(2,3);
 console.log(count); // 1
</script>

// ES6模块是动态引用，如果使用import从一个模块中加载变量（即import foo from ‘foo'），那么，变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者保证在真正取值的时候能够取到值。
// 循环加载 
// a.js
import {bar} from './b.js';
export function foo() {
  console.log('foo');
  bar();
  console.log('执行完毕');
}
foo();
 
// b.js
import {foo} from './a.js';
export function bar() {
  console.log('bar');
  if (Math.random() > 0.5) {
    foo();
  }
}

//在浏览器中使用原生的 ESM
// 1 通过  ​​script[type="module"]​​   可直接在浏览器中使用原生 ESM
<script type="module">
        import arrayUniq from "https://cdn.jsdelivr.net/npm/array-uniq/index.js"

        console.log(arrayUniq([1, 2, 3, 2, 3]))
        // [1, 2, 3]
</script>

// 2 使用 ​​ script[type="importmap"]​​  统一配置导入路径
<script type="importmap">
    {
      "imports": {
        "array-uniq": "https://cdn.jsdelivr.net/npm/array-uniq/index.js"
      }
    }
</script>

<script type="module">
    import arrayUniq from "array-uniq"
    console.log(arrayUniq([1, 2, 3, 2, 3]))
    // [1, 2, 3]
</script>

// 3 使用 ​​assert​​ 指定导入文件的类型
<script type="module">
    import data from "./data.json" assert { type: "json" };
    console.log(data)
    // {name: 'Tom', age: '25'}
</script>
// data.json
{
    "name": "Tom",
    "age": "25"
}