前端模块化（ CommonJS、AMD、CMD、UMD、ES Module） 详解

1.CommonJS

• CommonJS是2009年社区提出的最早的模块标准
• Node.js采用的是CommonJS标准的一部分，并在此基础上做了一些变化。

申明方式

    modele.exports.name = 'hello word';
　　module.exports.sayHello = function() {
　　    console.log('Hello ');
　　};

exports 是与外界联系的桥梁不可以直接复制，以下为错误方式

　　module.exports = {
　　    sayHello () {
    　　    console.log('Hello ');
    　　}
　　}

引用方式

var sayHello = require('module');
　　 sayHello();

参考

2.AMD

申明

//    filename: foo.js
define(['jquery'], function ($) {
    //    methods
    function myFunc(){};

    //    exposed public methods
    return myFunc;
});

3.UMD

UMD，全称 Universal Module Definition，即通用模块规范,
兼容了 commonjs 和 AMD规范

jqery UMD定义代码

(function (factory) {
　　    if (typeof define === 'function' && define.amd) {
　　    // AMD. Register as an anonymous module.
　　    define(['jquery'], factory);
　　} else if (typeof module === 'object' && module.exports) {
　　    // Node/CommonJS
　　module.exports = function( root, jQuery ) {
　　    if ( jQuery === undefined ) {
　　    // require('jQuery') returns a factory that requires window to
　　    // build a jQuery instance, we normalize how we use modules
　　    // that require this pattern but the window provided is a noop
　　    // if it's defined (how jquery works)
　　if ( typeof window !== 'undefined' ) {
　　    jQuery = require('jquery');
　　}
　　else {
　　    jQuery = require('jquery')(root);
　　    }
　　}
　　    factory(jQuery);
　　    return jQuery;
　　    };
　　} else {
　　// Browser globals
　　    factory(jQuery);
　　    }
　　}(function ($) {
　　    $.fn.jqueryPlugin = function () { return true; };
　　   }));

4. ES Modules

ES6 推出的模块化标准

ES Modules 的模块化能力由export 和import 组成，export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。我们可以这样定义一个模块：
申明

// 第一种方式
　　    export var firstName = 'Michael';
　　    export var lastName = 'Jackson';
　　    export var year = 1958;
// 第二种方式
　　    var firstName = 'Michael';
　　    var lastName = 'Jackson';
　　    var year = 1958;
　　    export { firstName, lastName, year };

引用

import { firstName, lastName, year } from 'module';
import { firstName as newName } from 'module';
import * as moduleA from 'module';

参考文档