這些基本都是模塊化方案，實際上自己頁很容易寫出模塊化的原理
如webpack

(function(modulesArr) {
    var rootModule = {};
    function __require__(id) {
        if (rootModule[id]) {
            return rootModule[id].exports;
        }
        var currentModule = modulesArr[id];
        var module = {
            id,
            exports: {}
        };
        currentModule.call(module.exports, module.exports, module, __require__);
        currentModule[id] = module;
        return module.exports;
    }
    return __require__(0);
})([
    function(exports, module, require) {
        var m1 = require(1);
        console.log(m1);
    },
    function(exports, module, require) {
        exports.msg = 'Hello World';
        var m2 = require(2);
        m2();
    },
    function(exports, module, require) {
        module.exports = function() {
            var str = 'Hello World';
            console.log(str);
            return str;
        };
    }
]);

我自己實現的browser端模塊化

(function(global) {
    'use strict';
    var errMsg = Math.random().toString(32).substr(2);
    var rootModule = {};
    function ModuleCtor(id) {
        if (!this || this.__proto__ !== ModuleCtor.prototype) {
            return new ModuleCtor(id);
        }
        this.id = id;
        this.exports = {};
        this.loaded = !1;
    }

    function define(id, fn) {
        if (typeof id === 'function') {
            fn = id;
            id = document.currentScript
                ? document.currentScript.src
                : Math.random()
                      .toString(32)
                      .substr(2);
        }
        if (typeof id !== 'string') {
            id = '' + id;
        }
        var module = ModuleCtor(id);
        exec();
        function __require__(src) {
            if (rootModule[src] && rootModule[src].__proto__ === ModuleCtor.prototype) {
                return rootModule[src].exports;
            }
            loadScript(src, function() {
                exec();
            });
            throw new Error(errMsg);
        }
        function exec() {
            try {
                fn.call(module.exports, module.exports, module, __require__);
                module.loaded = !0;
                rootModule[id] = module;
            } catch (err) {
                if (err.message !== errMsg) {
                    throw err;
                }
            }
        }
    }

    function loadScript(src, callback) {
        var script = document.createElement('script');
        script.src = src;
        script.onload = function() {
            callback && callback(src);
        };
        document.body.appendChild(script);
        return script;
    }
    global.define = define;
})(window);

本質都是js沒有模塊，所以我們就想到全局暴露一個rootModule對象，每一個鍵都是一個模塊，exports對象是依賴的暴露。
如a.js

    module.exports = 'Hello World';

b.js

    var chars = require('./a');
    process.stdout.write(chars + '\n'); // Hello World

但是我們怎么實現呢，（一）編譯：如webpack，（二）暴露一個函數，如requirejs、seajs。

webpack 可以配置 output libraryTarget: 'umd', library: 'globalVarName' 打題主說的這種umd包，兼容瀏覽器，requirejs，node環(huán)境。

另外我還是忍不住吐槽一下seajs的垃圾，一個文件的多個require發(fā)請求時沒有順序之分，字符串正則來分析依賴。。。如果jQuery的plugin依賴jQuery，需要對jQueryplugin改一下代碼討個套個客，不能直接想requirejs直接在config中聲明依賴。垃圾。當然我自己寫的模塊加載更垃圾，連依賴都不分析。多try幾次必然成功。

都是模塊化方案。

amd 對應 requireJs
cmd 對應 seaJs
commonJs 對應 nodeJs

之所以都想兼容過去，是因為很多js文件可以兼容運行在瀏覽器和node環(huán)境，為了重復利用，加上你列出的通用代碼，是最合適不過的，比如一個字符串處理trim，那么就可以在node和browser同時使用。不加模塊化代碼的話，就可能得寫3份重復的js了。