Requirejs與r.js打包，AMD、CMD、UMD、CommonJS、ES6模塊化

一：require.js

1、require.js是什麼？爲什麼要用它？
require.js是一個JavaScript模塊載入框架，實現的是AMD規範。使用require.js有以下優點：
① 異步加載，防止js加載阻塞頁面渲染，提高了性能。
② 使用程序調用的方式加載js，避免使用傳統的標籤引入方式。
③ 模塊化，便於代碼的編寫和維護。
④ 按需加載，減少不必要的載入。
2、require.js與傳統方式對比
①：傳統方式
dom結構：

a.js源碼：

運行效果：

總結：這樣雖然結構與邏輯分離，a.js這種寫法雖然實現了模塊化，不會污染全局環境，但是看起來並沒有那麼優雅，而且可以看到文本test並沒有渲染出來，也就是在head中引入js，js的加載會阻塞下邊dom的渲染，這是一個同步的過程。
② require.js方式
dom結構：

a.js源碼：

運行效果：

總結：可以看到require.js方式head中js的加載並沒有阻塞下邊dom的渲染，也就是說這是一個異步的過程，通過define定義模塊，require加載模塊更清晰明瞭。
3、require.js常用api
（1）define 定義模塊
（2）reuqire 加載依賴模塊，執行加載完後的回調函數
（3）config 配置信息，常用配置項：
① paths 指定資源別名、設置資源路徑
② baseUrl 設置獲取資源時的公共前置路徑，簡化paths中路徑的寫法
③ waitSeconds 設置加載模塊時的最長等待時間
④ shim 設置文件的依賴、輸出非AMD模塊化文件
4、使用require.js改造昨天的sass demo
（1）目錄結構：

(2) 運行效果：

（3）源碼鏈接：https://github.com/XieTongXue/demo/tree/master/requirejs-demo

二、r.js

概念：r.js是requireJs的優化工具，能合併壓縮js、css。
使用r.js打包以上開發的demo，r.js在github下載
文件目錄如下：

新增build.js，源碼如下：

其中name配置項爲打包入口，out爲輸出，baseUrl爲paths前置路徑。
新建collect.js，用於收集模塊

進入build 文件夾，命令行運行 node r.js -o build.js，會生成一個app.js，在index.html中引用即可。

源碼鏈接：https://github.com/XieTongXue/demo/tree/master/r.js-demo

三、AMD|CMD|UMD|CommonJS|ES6

AMD：異步模塊定義，異步加載模塊，即不堵塞瀏覽器其他任務，而加載內部是同步的（加載完模塊後立即執行回調）。
CMD：與AMD不同的是，AMD一開始要將依賴以數組形式導入，而CMD推崇依賴就近，延遲執行。
UMD：AMD和CommonJS（服務端模塊化規範)的結合體，UMD先判斷是否支持Node.js的模塊（exports）是否存在，存在則使用Node.js模塊模式，再判斷是否支持AMD（define是否存在），存在則使用AMD方式加載模塊。
CommonJS：服務端模塊化規範，如Nodejs

寫法舉例：

AMD：(代表：require.js)

// math.js
define(function () {
    var add = function (x, y) {
        return x + y
    }
    return {
        add: add
    }
})

// use.js
require(['math', 'other'], function (math, other) {
    console.log(math.add(1, 2)) // 3
    other.doSomething()  // other
})

CMD：(代表：sea.js)

// CMD
define(function(require, exports, module) {
    var a = require('./a');
    a.doSomething();
    var b = require('./b');
    b.doSomething();
})
// 對應 AMD
define(['a', 'b'], function(a, b) {
    a.doSomething()
    b.doSomething()
    // 模塊自己的方法
})

UMD：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['b'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory(require('b'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.b);
    }
}(this, function (b) {
    //use b in some fashion.

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));

CommonJS:

// math.js
exports.add = function (a, b) {
    return a + b
}

// use.js
var math = require('math')
math.add(1, 2)

ES6：

// math.js
export function add (a, b) {
    return a, b
}

// use.js
import {add} from 'math'
add(1, 2)