使用r.js打包js文件

之前的文章里有介紹requirejs的基本使用方法，但是直接使用requirejs會暴露出一個問題，就是當模塊過多的時候，requirejs就會引入許多js文件，大大的增加了請求數，那么有的朋友就要說了，我們自己壓縮那些模塊文件不就行了么，其實仔細想想這樣到底行不行，答案是行！但是很麻煩：

1. 首先一般我們寫模塊時不會去定義模塊名字，因為模塊名字默認就是js文件名字，如果自己手動去寫模塊名，就增加了額外的工作量。

2. 加載順序的問題，自己手動壓縮，就要嚴格把控好模塊的先后順序（特別是有jquery及jquery插件的情況下），否則很容易出錯。

針對這些問題，requirejs給出了解決方案，就是r.js，r.js就是針對用requirejs進行模塊化開發后的打包壓縮問題的。r.js下載

那么下面就來介紹如何使用r.js來打包壓縮我們的模塊們:

1. 把r.js放在我們的項目根目錄中。

2. 新建一個built.js，內容如：

({
    baseUrl: './static/scripts/src/',
    name: "../../../main",
    paths: {
        'jquery': "vendor/jquery/jquery",
        'jquery.email': "plugin/jquery.email",
        'aaa': "moudle/aaa/aaa",
        'bbb': "moudle/bbb/bbb",
        'ccc': "moudle/ccc/ccc"
    },
    shim: {
        'jquery': {
            exports: "$"
        },
        'jquery.email': {
            deps: ["jquery"],
            exports: "jQuery.fn.hEmail"
        }
    },
    out: "main-built.js",
})

 built其實就是一個打包壓縮的配置文件，這里我用的是之前文章初始requirejs(一)中的例子，這樣看built.js的代碼是不是很熟悉，就像require的配置js一樣？事實就是差不多的，那我們來解釋下不大一樣的部分，name其實就是那個requirejs的入口文件，output就是打包之后的文件名，還有個叫dir的屬性，我這里沒有使用，是用來配置輸出的文件目錄的（比如dir: ../production，這樣就直接輸出到生產環境了），當然還有其他的屬性，這里就不介紹了，詳細請參考官網。

下面我們來看看輸出過程：

最后生成了main-built.js文件，然后我們試着把原先代碼引用的地方替換掉，

<script data-main="main-built.js" src="static/scripts/src/vendor/require/require.js"></script>

結果，頁面還是能正常顯示，模塊還是正常加載的，而且我們的js引用就變成了一個，大大的減少了請求數，完美！