IT工程師數位筆記本

r.js是requireJS的優化（Optimizer）工具，可以實現前端文件的壓縮與合并，在requireJS異步按需加載的基礎上進一步提供前端優化，減小前端文件大小、減少對服務器的文件請求。
要使用r.js需下載r.js文件（點我下載），將其放到你的項目根目錄；還需要安裝nodeJS（點我下載），以便通過命令行來執行r.js功能。
我們將拿一個小案例來詳細說明使用r.js的方法（你可以點此下載這個案例）。

如下圖所示的項目（見案例中的before文件夾）僅僅使用了requireJS，但還未使用過r.js。該項目有兩個頁面，其中 index.html 使用了jQuery和我寫的一個jq幻燈片插件VajoyJS；另一個頁面 reg.html 使用了avalonJS 框架。

我們打開index.html 和 reg.html兩個文件，從引入requireJS標簽中的data-main信息，可以知道它們的入口文件分別為 js/pages 目錄下的 index.js 和 reg.js。

故咱分別打開 js/pages 目錄下的 index.js 和 reg.js 文件，看下它們的配置代碼:

⑴ index.js：

require.config({
    paths: {    //相對這個js文件的路徑
        jquery: '../common/jq',
        VJ:'../common/VajoyJS'
    }
});

require(['jquery'], function ($) {
    $("#outside2").html("下面是一個幻燈片");
});


require(['jquery','VJ'], function ($,VJ) {
    VJ($("#outside")).slideFade("li_df","li_ac","arrow_left","arrow_right");
});

⑵ reg.js：

require.config({
    paths: {    //相對這個js文件的路徑
        avalon: '../common/avalon'
    }
});

require(['avalon'], function () {
    var reg = avalon.define("reg", function(vm) {
         vm.username = "";
    })
});

這里我們自然會聯想到一個稍有麻煩的事情，就是每一個入口文件都要配置一下require.config，比如有十個頁面要依賴到jQuery，那對應的十個入口文件可能都要寫上：

require.config({
    paths: {    //相對這個js文件的路徑
        jquery: '../common/jq'
        //,Others....
    }
});

自然是頗為煩瑣的事情，那么有沒有辦法將所有頁面入口文件的config信息都集中在一起一次處理即可？
r.js可以幫你做到。

我們可以先大刀闊斧地把倆個入口文件里的 require.config({ ... }) 部分全部刪除掉，比如上述的 index.js 只需保留：

require(['jquery'], function ($) {
    $("#outside2").html("下面是一個幻燈片");
});


require(['jquery','VJ'], function ($,VJ) {
    VJ($("#outside")).slideFade("li_df","li_ac","arrow_left","arrow_right");
});

View Code

然后我們把 r.js 文件放到項目根目錄，再于根目錄新建一個 build.js 文件，該文件內容如下：

({ 
    appDir: './',   //項目根目錄
    dir: './vajoy',  //輸出目錄，全部文件打包后要放入的文件夾（如果沒有會自動新建的）
    
    baseUrl: './js/pages',   //相對于appDir，代表要查找js文件的起始文件夾，下文所有文件路徑的定義都是基于這個baseUrl的
    
    modules: [                      //要優化的模塊
      { name:'index'} ,{ name:'reg'}    //說白了就是各頁面的入口文件，相對baseUrl的路徑，也是省略后綴“.js”
    ],
    
    fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/,    //過濾，匹配到的文件將不會被輸出到輸出目錄去
    
    optimizeCss: 'standard', 
    
    removeCombined: true,   //如果為true，將從輸出目錄中刪除已合并的文件
    
    paths: {    //相對baseUrl的路徑
            avalon: '../common/avalon',
            jquery: '../common/jq',
            VJ:'../common/VajoyJS'
    }
    //     ,shim:{ .....}      //其實JQ和avalon都不是嚴格AMD模式，能shim一下最好了，不過這里咱省略
}) 

各參數的意義我是從網上找了一份說明（建議配合我代碼上的注釋來理解）：

接著是最重要的一步，打開 Node.js command prompt 進入node命令行界面，并定位到該項目目錄：

然后鍵入

node r.js -o build.js 

并回車來運行 r.js 優化器。這時候再打開項目目錄，會發現新增了一個 vajoy 文件夾，r.js把優化、壓縮后的全部項目文件都拷貝到了這個文件下：

自此我們完成了 r.js 的全部操作（其實很簡單對吧~）

這里要知道的倆點是，vajoy文件夾是我們在 build.js 中“dir”項目所填寫的文件名，r.js會自動把最終優化好的項目文件全都放到這里，而之外的原文件則不會被修改到。

另一點要了解的是，我們在 build.js 中設置了

fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/

它表示告知r.js不要把匹配到的文件放到dir定義的文件夾（vajoy文件夾）中，我們看看這個正則，它匹配了r.js、build.js和所有.scss后綴的文件。

而你可以看到，在vajoy文件夾里是不存在這些被匹配到的文件的。你可以按照需求，看看哪些文件是最終無需收到項目中的，從而編寫相應的正則表達式。

r.js做了什么？

雖然我們知道r.js可以幫我們少寫一些require.config，也可以幫我們在最終項目中摒棄多余的文件，但這不是使用它的主要目的。

我們可以分別打開案例中 before 和 after 目錄下的index.html，看下使用r.js前后，該文件對服務器的請求發送了什么變化：

可以知道，r.js把index.html頁面所需要用到的腳本都全部整合到入口文件index.js中去，從而減少了對服務器的請求。

另外樣式文件也會在r.js的操作下進行壓縮，從而有效減少該文件大小：

希望此教程能幫你較好地使用r.js，共勉~