requireJS的優化工具 ---- r.js

 

requireJS是javascript的模塊加載器，是基於AMD規范實現的。

r.js是其提供的對模塊進行打包和構建的一個工具

下載 r.js

創建r.js 的配置文件 build.js

build.js

 

({
     baseUrl: './js/pages', 　　 //相對於appDir，代表要查找js文件的起始文件夾，下文所有文件路徑的定義都是基於這個baseUrl的

    appDir: './', 　　 //項目根目錄
    dir: './outdir',　　 //輸出目錄，全部文件打包后要放入的文件夾（如果沒有會自動新建的）
　　　　/* 有了dir，就不能使用out配置項了，你在編譯時它有非常明確的提示 */
　　　　/*"appDir" is not compatible with "out". Use "dir" instead. appDir is used to copy whole projects, where "out" with "baseUrl" is used to just optimize to one file.*/
　　　　/*"appDir" 和 "out"是不兼容的，需要用"dir"代替， "appDir"是用來拷貝整個項目的，"out"和"baseUrl"僅是用來優化一個文件的*/
    modules: [
　　　　//要優化的模塊 —— 里面的配置項即各頁面的 相對baseUrl路徑的 省略后綴“.js”的 入口文件(入口文件 ---- 即加載頁面時引入require.js的script標簽上data-main屬性所指定的文件)
　　　　//該屬性必不可少，因為一個程序至少需要有一個入口
        { name:'main'},
        { name:'index'} 
　　],

    out: 'index-build.js',　　//輸出文件名
    name:'main',

    fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/,　　 //正則匹配過濾文件，匹配到的文件將不會被輸出到輸出目錄去，這里過濾掉的是 r.js、build.js、*.scss三類文件
　　optimizeCss: 'standard',
　　removeCombined: true, //如果為true，優化器將從輸出目錄中刪除已合並的文件
　　paths: { //各模塊相對baseUrl的路徑，直接從require.config的path配置中烤取即可
        "underscore": "../libs/underscore/underscore-min",
        "backbone": "../libs/backbone/backbone-min",
　　},
    shim:{// 配置不符合AMD規范的模塊，直接從require.config的shim配置中烤取即可
        "underscore": {
　　        exports: "_"
        },
        "backbone": {
　　        deps: ["underscore", "jquery"],
　　        exports: "Backbone"
        },
    } 
})

 

 

 

常用的build.js的參數屬性解釋：

 

r.js把各頁面所需要用到的腳本全部都整合到各自的入口文件(一個或多個js)中去，從而減少了對服務器的請求。

mainConfigFile：'common.js'　　//多頁面復雜工程的多個入庫文件的統一的 require.config 的配置放置文件，相對baseUrl的路徑

由於多頁面工程需要多個入庫文件，此時就會出現相同的 require config 的在一個工程下配置多次的問題，為了避免這種問題，可以將多個入庫文件的相同config提出到一個js文件中，進行統一配置，

並且就會用到build.js的mainConfigFile參數來對其進行重新定義模塊

 

baseUrl

　　---- 必不可少項，將要打包的所有文件的相對公共路徑

appDir,dir,modules

　　---- 當一個程序有多個入口文件的時候

　　---- 將相應文件打包至配置的dir目錄中

　　---- 各頁面的入口文件不用改變，還是相應的入口文件即可

out,name

　　---- 當程序只有一個入口文件的時候

　　---- 將要打包的所有文件壓縮到配置的out文件中

　　---- 項目入口index.html頁面的入口文件需改為out的位置文件

 

實例可參考：https://github.com/requirejs/example-multipage-shim

 

一篇通俗易懂的r.js打包應用簡例：http://www.tuicool.com/articles/iYNJbqZ

 

 http://www.cnblogs.com/vajoy/p/3920163.html#!/follow

 http://requirejs.org/docs/start.html